通过 FILE API 使用 JAVASCRIPT 读取文件

简介

HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式。为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用。另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小。

该规范通过“本地”文件系统提供了多种文件访问接口:

  1. File - 独立文件;提供只读信息,例如名称、文件大小、mimetype 和对文件句柄的引用。
  2. FileList - File 对象的类数组序列(考虑  或者从桌面拖动目录或文件)。
  3. Blob - 可将文件分割为字节范围。

与以上数据结构结合使用时,FileReader 接口可用于通过熟悉的 JavaScript 事件处理来异步读取文件。因此,可以监控读取进度、找出错误并确定加载何时完成。这些 API 与 XMLHttpRequest 的事件模型有很多相似之处。

请注意:在编写此教程时,Chrome 浏览器 6.0 和 Firefox 3.6 均支持处理本地文件所必需的 API。从 Firefox 3.6.3 起,就不支持 File.slice() 方法了。

选择文件

首先需要检查您的浏览器是否完全支持 File API:

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

当然,如果您的应用程序只会用到这些 API 中的一小部分,请相应地修改此代码段。

使用表单输入进行选择

要加载文件,最直接的方法就是使用标准  元素。JavaScript 会返回选定的 File 对象的列表作为 FileList。以下示例使用“multiple”属性实现了同时选择多个文件:




示例:使用表单输入进行选择。赶快试试吧!

使用拖放操作进行选择

另一种加载文件的方法是在本地将文件从桌面拖放到浏览器。我们可以对前一个示例稍作修改,加入拖放支持。

Drop files here

示例:使用拖放操作进行选择。赶快试试吧!

将文件拖放到此处

请注意,有些浏览器会将  元素视为本地拖放目标。在前一个示例中尝试将文件拖动到输入字段上。

读取文件

现在精彩的部分到了!

当您获取了 File 引用后,实例化 FileReader 对象,以便将其内容读取到内存中。加载结束后,将触发读取程序的 onload 事件,而其 result 属性可用于访问文件数据。

FileReader 包括四个异步读取文件的选项:

  • FileReader.readAsBinaryString(Blob|File) - result 属性将包含二进制字符串形式的 file/blob 数据。每个字节均由一个 [0..255] 范围内的整数表示。
  • FileReader.readAsText(Blob|File, opt_encoding) - result 属性将包含文本字符串形式的 file/blob 数据。该字符串在默认情况下采用“UTF-8”编码。使用可选编码参数可指定其他格式。
  • FileReader.readAsDataURL(Blob|File) - result 属性将包含编码为数据网址的 file/blob 数据。
  • FileReader.readAsArrayBuffer(Blob|File) - result 属性将包含 ArrayBuffer 对象形式的 file/blob 数据。

对您的 FileReader 对象调用其中某一种读取方法后,可使用 onloadstartonprogressonloadonabortonerror 和 onloadend 跟踪其进度。

下面的示例从用户选择的内容中过滤掉了图片,对文件调用 reader.readAsDataURL(),并通过将“src”属性设为数据网址来呈现缩略图。






示例:读取文件。赶快试试吧!

用图片目录试试这个示例吧!


分割文件

在某些情况下,将整个文件读取到内存中并不是最好的选择。例如,您要编写一个异步文件上传器。要提高上传速度,一种可行的方法是以彼此独立的字节范围块读取和发送文件。然后,由服务器组件负责按正确顺序重建文件。

对我们来说幸运的是,File 接口支持分割方法,因而可以支持此用例。在该方法中,起始字节为第一个参数,终止字节为第二个参数,选项内容类型字符串为第三个参数。该方法的语义近期做了更改,因此已由供应商添加前缀:

if (file.webkitSlice) {
  var blob = file.webkitSlice(startingByte, endindByte);
} else if (file.mozSlice) {
  var blob = file.mozSlice(startingByte, endindByte);
}
reader.readAsBinaryString(blob);

以下示例演示了如何读取文件块。值得注意的是,该示例使用 onloadend 并检查 evt.target.readyState,而不是使用 onload 事件。



 Read bytes: 

  
  
  
  

示例:分割文件。赶快试试吧!

 读取字节: 1-5 6-15 7-8 整个文件

监控读取进度

我们在使用异步事件处理时还能顺便获得一项优势,那就是能够监控文件的读取进度;这对于读取大文件、查找错误和预测读取完成时间非常实用。

onloadstart 和 onprogress 事件可用于监控读取进度。

以下示例演示了如何通过显示进度条来监控读取状态。要查看进度指示器的实际效果,请尝试读取大文件或远程驱动器中的文件。





0%

示例:监控读取进度。赶快试试吧!

 取消读取
0%

提示:要查看进度指示器的实际效果,请尝试读取大文件或远程驱动器中的资源。

参考

  • File API 规范
  • FileReader 接口规范
  • Blob 接口规范
  • FileError 接口规范
  • ProgressEvent 接口规范

 

转载:http://www.html5rocks.com/zh/tutorials/file/dndfiles/#toc-slicing-files

你可能感兴趣的:(html5,file,javascript,api,function,xmlhttprequest,button)