JavaScript 文件对象详解

在浏览器中操作文件，多数情况下用到的是 File 对象，从 <input type='file' /> 元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.

File 对象继承自 Blob 对象，先看看 Blob 对象。

1. Blob 对象

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。

Blob构造函数 Blob(array[, options])

• array 是一个由ArrayBuffer, ArrayBufferView, Blob, string 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。string会被编码为UTF-8。

• options 是一个可选的对象，它可能会指定如下两个属性：* type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。* endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变。

示例:

var content1 = ['This is my firt trip to an island'];
var blob1 = new Blob(content, {type: 'text/plain'});
var content2 = {name: 'Alice', age: 23};
var blob2 = new Blob([JSON.stringify(content2, null, 2)], {type: 'application/json'}); 

Blob实例属性

属性名称	读/写	描述
size	只读	Blob 对象中所包含数据的大小（字节）。
type	只读	一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如 "image/png".

示例:

var content = ['<div id="box"><p class="pra">a paragraph</p></div>'];
var blob = new Blob(content, {type: 'text/html'});
console.log(blob.size); // 50
console.log(blob.type); // text/html 

Blob实例方法

• slice([start[, end[, contentType]]])

slice 方法接收三个可选参数，start 和 end 都是数值，表示截取的范围，contentType 指定截取的内容的 MIME 类型。返回一个新的 Blob对象。

var blob = new Blob(['This is an example of Blob slice method'], {type: 'text/plain'});
console.log(blob.size); // 39
var newBlob = blob.slice(10, 20, 'text/plain');
console.log(newBlob.size); // 10 

从 Blob 对象中读取内容可以使用 FileReader. 下文会介绍。

2. File 对象

File构造函数

我们接触的多数关于 File 的操作都是读取，js也为我们提供了手动创建 File 对象的构造函数：File(bits, name[, options])。

• bits (required) ArrayBuffer，ArrayBufferView，Blob，或者 Array[string] — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。。* name [String] (required) 文件名称，或者文件路径.* options [Object] (optional) 选项对象，包含文件的可选属性。可用的选项如下：* type: string, 表示将要放到文件中的内容的MIME类型。默认值为 '' 。* lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。

示例：