上传图片实时预览

引入

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

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 事件

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180408G1CY9O00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券