浅谈 HTML5 文件处理

HTML5 文件 API

File API 支持程度

FileList 对象与 file 对象

• FileList 对象：表示用户选择的文件列表。通过添加 mulitiple 属性，file 控件内允许一次放置多个文件。
• File 对象：控件内的每一个用户选择的文件。
  • 属性：
    • name：文件名，不包括路径。
    • lastModifiedDate：表示文件的最后修改日期。
    • lastModified：表示当前时间与1970年的时间差(单位为毫秒)。
• 示例：

    选择文件：
    
    

Blob 对象

• 概念：表示二进制原始数据。
• 继承关系：file 对象继承了 Blob 对象。
• 属性：
  • size：表示一个 Blob 对象的字节长度。
  • type：表示 Blob 的 MIME 类型，如果是未知类型，则返回一个空字符串。注意，对于图像类型的文件，Blob 对象的 type 属性都是以 “image/” 开头，后跟图像类型。我们可以利用此特性来判断用户选择的文件类型是否是我们想要用户选择。
  • slice()：可以访问字节内部的原始数据库。
• 示例：

    选择文件：
    
    

Blob 对象的 type 属性利用：

选择文件：

accept 属性：让 file 控件只能接受某种类型的文件。

FileReader 接口

• 目的：把文件读入内存，并且读取文件中的数据。
• 简述：FileReader 接口提供了一个异步 API，使用该 API 可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

// 检查浏览器是否对 FileReader 接口提供支持
if(typeof FileReader == 'undefined') {
    alert("您的浏览器未实现 FileReader 接口");
} else {
    var reader = new FileReader();
    // 正常使用浏览器
}

• 方法：

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制码
readAsText	file, [encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为 DataURL
abort	(none)	中断读取操作

• readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。将文件以文本方式读取，读取的结果即是这个文本文件中的内容。

• readAsBinaryString：将文件读取为二进制字符串，通常将其传送给后端，后端可以通过这段字符串存储文件。

• readAsDataURL：将文件读取为一串 Data URL 字符串。该方法事实上将小文件一种特殊格式的 URL 地址形式直接读入页面。这里的小文件通常是指图像与 html 等格式的文件。

• 事件：包含一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	数据读取中断时触发
onerror	数据读取出错时触发
onloadstart	数据读取开始时触发
onprogress	数据读取中触发
onload	数据读取成功完成时触发
onloadend	数据读取完成时触发，无论成功或失败

• 示例：

    请选择一个文件：
    
    
    
    


    

• 注意：FileReader 对象读取到的数据都保存在 result 属性中。

请选择一个图像文件：