上传图片实时预览

引入

当使用上传图片文件时，如何在上传到服务器之前，在本地进行预览？

FileReader 对象

FileReader对象允许Web应用程序异步读取用户计算机上的文件。使用创建一个FileReader实例对象：

属性

：在读取时发生的错误

：fileReader当前状态

：读取到的文件内容，只有在读取操作完成后有效

方法

：终止读取操作

：读取文件中的内容，读取完成后调用方法，结果中包含一个格式的字符串表示文件内容（针对图片就是base64格式的字符串）

事件处理程序

：读取被终止时被调用

：读取错误时调用

：读取成功时调用

：读取完成时调用，无论成功失败， 在或后调用

：读取开始前调用

：读取过程中周期调用、

兼容性

image

使用FileReader对象预览图片

在的事件中获取上传的图片对象

使用的获取上传对象的类数组对象，每一项的属性对应文件名

中增加属性，上传多个文件

创建对象，并通过方法，传入要预览的文件对象，在回调函数中对对象的进行处理

代码：

预览多张图片

拖拽预览

不通过点击事件而是通过将图片拖拽到指定区域实现预览。

在拖放过程中会触发的事件：

在源元素上触发的事件（需要设置 属性）

：开始拖动时触发

：拖动时触发

：拖动完成时触发

释放时触发的事件

：进入容器范围时触发

：拖动时触发（触发间隔350毫秒）

：离开容器范围时触发

：拖动过程中，释放鼠标按键时触发

显然这里需要使用的是 事件，但是需要注意，使用 事件需要阻止浏览器默认行为，否则不会触发

然后在 事件中触发上面的函数就可以实现图片预览了。注意， 的 事件获取文件对象是 ，而 事件则是

也可以通过这个方法来实现图片的预览

静态方法会创建一个 ，这个新的URL 对象表示指定的 对象或 对象。

在每次调用 方法时，都会创建一个新的 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 对象时，每个对象必须通过调用 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。

区别

由于 是浏览器自身的接口，貌似性能会更好一点

并且可能比fileReader对IE的兼容性好一些，问题少一些？

不过可以二者选择使用吧，多一个选择不是坏事

参考

MDN FileReader

js图片前端预览之 filereader 和 window.URL.createObjectURL

图片上传预览 （URL.createObjectURL）

chrome拖拽不响应ondrop和dataTransfer.setData事件

JavaScript实现拖拽预览，AJAX小文件上传

菜鸟教程 ondrop 事件