html5-FileReader接口

<!-- html 部分 -->
    <h5>html-FileReader</h5>
    <input id="upload" type="file" accept="image/*">
    <img id="img" src="">

    <!-- js 部分 -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        $(function(){
            $('#upload').change(function(){
                var reader = new FileReader()
                    
                reader.onload = function(){//文件读取完成时 出发onload事件
                    var result = reader.result; //base64 编码的文件存在FileReader.result中

                    $('#img').attr('src',result);

                    //选中文件转换为 Blob对象
                    var blob = dataURItoBlob(result);
                    console.log(blob)
                }
                reader.readAsDataURL(this.files[0]); //获取base64 编码
            });
        });

        //base64 转 Blob对象，用于文件上传
        function dataURItoBlob(dataURI) {  
            var byteString = atob(dataURI.split(',')[1]);  
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];  
            var ab = new ArrayBuffer(byteString.length);  
            var ia = new Uint8Array(ab);  
            for (var i = 0; i < byteString.length; i++) {  
                ia[i] = byteString.charCodeAt(i);  
            }  
            return new Blob([ab], {type: mimeString});  
        }  
    </script>

来源：oschina

链接：https://my.oschina.net/u/3229305/blog/1813256