利用FileReader API预览图片
需求
在 Web 应用程序中,上传图片前进行预览是比较常见的需求。在老式浏览器中,必须先将图片上传至服务器,获取实际链接后嵌入方可预览。随着浏览器 API 的不断丰富,现在利用 FileReader 可以做到图片上传之前就在页面进行预览,提高用户体验。
FileReader & File & Blob
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区), 要读取的文件可以是 File 对象,数据可以是 Blob 数据。
利用 Html file input 表单,我们能获取到对应选择的计算机文件系统文件的 File 对象。
而一个 Blob 对象表示一个不可变的, 原始数据的类似文件对象,File 接口就是基于 Blob。
示例
下面示例了一个图片上传预览:
在图片上传之后,可以看到img
的 src 替换为了data:image/png;base64,.....
类似的字符,该字符包含了完整的图片数据,如果图片较大,该字符串会相应的非常长。
更进一步
为了简化预览的图片链接,会需要用到URL
对象的createObjectURL
方法,该方法会创建一个简化的链接,实际是指向一个包含了真实数据的对象。此时的链接会类似blob:https://fiddle.jshell.net/39ebabeb-8cdb-4e36-bc38-3fe05f9cb757
。
- 原文作者:Touchumind
- 原文链接:https://blog.fedepot.com/post/javascript-filereader-api-preview-image/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。