实现上传时预览图片
主要使用的类 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将文件读取为二进制码 不能用 readAsDataURL
Blob
或File
对象。将文件读取为 DataURL readAsText
Blob
或File
对象。, [encoding] 将文件读取为文本
Blob
或File
对象。
代码
<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