你不了解的 JavaScript 之 file API (中)

AirStar
452 阅读2分钟

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战

URL对象

我们除了可以使用base64字符串作为内容的DataURI将一个文件嵌入到另外一个文档里，还可以使用URL对象。URL对象用于生成指向File对象或Blob对象的URL。

window.URL.createObjectURL

静态方法会创建一个 DOMString，它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示着指定的 File 对象或者 Blob 对象。

var objecturl =  window.URL.createObjectURL(file);

静态方法用来释放一个之前通过调用 window.URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。

window.URL.revokeObjectURL

例如：使用对象URL来显示图片：

window.URL = window.URL || window.webkitURL;

var img = document.createElement("img");
img.src = window.URL.createObjectURL(blob);
img.height = 60;
img.onload = function(e) {
    window.URL.revokeObjectURL(this.src);
}
document.body.appendChild(img);

FileRea

der API详解 Version:0.9 StartHTML:0000000105 EndHTML:0000001423 StartFragment:0000000141 EndFragment:0000001383

FileReader类型表示一种异步文件读取机制。可以把FileReader想象成

类似于XMLHttpRequest，只不过是用于从文件系统读取文件，而不是从

服务器读取数据。FileReader类型提供了几个读取文件数据的方法。

  • readAsText(file, encoding)：从文件中读取纯文本内容并保存 在result属性中。第二个参数表示编码，是可选的。
  • readAsDataURL(file)：读取文件并将内容的数据URI保存在result 属性中。
  • readAsBinaryString(file)：读取文件并将每个字符的二进制数据 保存在result属性中。
  • readAsArrayBuffer(file)：读取文件并将文件内容以ArrayBuffer 形式保存在result属性。

这些读取数据的方法为处理文件数据提供了极大的灵活性。例如，为了 向用户显示图片，可以将图片读取为数据URI，而为了解析文件内容， 可以将文件读取为文本。 因为这些读取方法是异步的，所以每个FileReader会发布几个事件，其 中3个最有用的事件是progress、error和load，分别表示还有更多数据、发生了错误和读取完成。

状态常量

  • EMPTY：值为0，还没有加载任何数据;
  • LOADING：值为1，数据正在被加载;
  • DONE：值为2，已完成全部的读取请求。

属性

  • error：在读取文件时发生的错误， 只读;
  • readyState：表明FileReader对象的当前状态，值为State constants中的一个，只读；
  • result：取到的文件内容，这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的，只读。
avatar
文章
阅读
粉丝