实现上传时预览图片

 

 主要使用的类  js new FileReader

属性

    error   返回一个 DOMError
    onabort 属性包含在终止事件被触发时执行的事件处理程序，举例，当读取文件的过程中需要中止时。
    onload  当 FileReader 读取文件的方式为  readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候，会触发一个 load 事件。从而可以使用  FileReader.onload 属性对该事件进行处理。
    readyState   提供 FileReader 读取操作时的当前状态。
    result  文件成功读取完成后，，load 触发  将读到的内容存储在  result中

 

 

方法

         
         方法名                      参数                       　　　　　　　　 描述
        abort                    none                            　　　　　　 中断读取
　　　　 readAsArrayBuffer()　　　Blob 或 File 对象。　　　　　　　　　　　　　　方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。
        readAsBinaryString       Blob 或 File 对象。                      　　将文件读取为二进制码   不能用
        readAsDataURL            Blob 或 File 对象。                    　　 将文件读取为 DataURL
        readAsText              Blob 或 File 对象。, [encoding]           　　将文件读取为文本

代码

<input id="prepare" type="file" accept="" value="aaa" multiple="multiples" onchange="preparePic(this)"/>       

        function preparePic(obj)
        {
            var a = $(obj)[0]
            var b = obj.files
            
            console.log(obj);
            console.log(a.value);
            console.log(obj.files);
            
            var read = new FileReader();
//          read.readAsDataURL(obj.files[0]);//可以直接src
//          read.readAsBinaryString(obj.files[0]);
            read.readAsText(obj.files[0],"utf-8");//直接读取字符串
            read.onload = function(e){
                console.log("加载完成");
                console.log(e)
                var img = document.getElementById("pic");
//                img.src = e.target.result;
                $("#myPic").html(e.target.result)
            }
            
        }

 兼容性

注意: Internet Explorer  10 之前的版本并不支持  FileReader() 。关于图片文件预览的兼容性解决方案，可以查看 crossbrowser possible solution for image preview 或者 this more powerful example 。

URL.createObjectURL(blob)和FileReader.readAsDataURL(file)

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

区别

    通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串

    通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL

执行时机

    createObjectURL是同步执行（立即的）
    FileReader.readAsDataURL是异步执行（过一段时间）

内存使用

    createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
    FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）

兼容性方面两个属性都兼容ie10以上的浏览器。

优劣对比：

    使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
    如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL