使用URL.createObjectURL()与FileReader API实现文件(图片)上传立即回显

来自mozilla的定义:

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

重要提示: FileReader仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件,应使用标准Ajax解决方案进行服务器端文件读取,如果读取跨域,则使用CORS权限。

Note: 此特性在  Web Worker 中可用。
 

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

Note: 此特性在  Web Worker 中可用。

注意:此特性在 Service Worker 中不可用,因为它有可能导致内存泄漏。

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

两个API的IE兼容为>=10

用法:

猜你喜欢

转载自www.cnblogs.com/xzdm/p/11939882.html
今日推荐