File API 有以下几部分 JavaScript 类组成：
- 读取、操作文件的类：File/Blob,FileList,FileReader
- 创建、写入文件的类：BlobBuilder,FileWriter
- 目录、文件系统访问的类：DirectoryReader,FileEntry/DirectoryEntry,LocalFileSystem
1.File
概要
对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.
方法概述
DOMString getAsBinary(); 非标准 已废弃 Gecko 7.0
|
DOMString getAsDataURL(); 非标准 已废弃 Gecko 7.0
|
DOMString getAsText(in DOMString encoding); 非标准 已废弃 Gecko 7.0
|
属性
| 属性名 | 类型 | 描述 |
fileName |
DOMString |
当前File对象所引用文件的文件名. 只读. 已废弃 Gecko 7.0
|
fileSize |
unsigned long long |
当前File对象所引用文件的文件大小,单位为字节. 只读. 已废弃 Gecko 7.0
|
lastModifiedDate |
jsval |
当前File对象所引用文件最后修改时间. 只读. jscontext *cx Requires Gecko 15.0
|
mozFullPath |
DOMString |
当前File对象所引用文件的完整本地路径,只在特权代码中可用. 只读. 非标准 Requires Gecko 1.9.2
|
mozFullPathInternal |
DOMString |
这是一个内部使用的属性,没有做安全检查. 只读. Native code only! 非标准 Requires Gecko 2.0 |
mozLastModifiedDate |
uint64_t |
当前File对象所引用文件最后修改时间. 只读. Native code only! Requires Gecko 19.0
|
name |
DOMString |
当前File对象所引用文件的文件名. 只读. Requires Gecko 1.9.2
|
size |
unsigned long long |
当前File对象所引用文件的文件大小,单位为字节. 只读. Requires Gecko 1.9.2
|
type |
DOMString |
当前File对象所引用文件的文件类型(MIME类型). 只读. Requires Gecko 1.9.2
|
方法
些方法都是非标准的.想要读取一个文件的内容,你应该使用一个FileReader对象.查看如何在web应用程序中使用文件一文了解详情.
getAsBinary()
已废弃 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)DOMString getAsBinary();
参数
无
返回值
getAsDataURL()
已废弃 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)返回一个将所引用文件的完整内容进行编码后的data: URL字符串.
注: 该方法已经过时,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果." rel="nofollow">
FileReader对象的
readAsDataURL()方法来代替.
DOMString getAsDataURL();
参数
无
返回值
一个字符串,包含了将所引用文件的文件内容进行编码后的data: URL.
getAsText()
已废弃 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)返回一个字符串,其内容为根据参数encoding指定的编码读取文件内容形成的文本.
注: 该方法已经过时,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果." rel="nofollow">
FileReader对象的
readAsText()方法来代替.
DOMString getAsText( in DOMString encoding );
参数
返回值
一个字符串,其内容为根据参数encoding指定的编码读取文件内容形成的文本.
附注
Gecko附注
Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)
从Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始,在特权代码(比如扩展中的代码)中,可以将一个nsIFile对象传入File构造函数,从而生成一个File对象.
Gecko 8.0 note
(Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)
从Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5)开始,在xpcOM组件代码中,你可以直接使用new File来创建一个 File对象,而不需要像以前那样必须实例化一个nsIDOMFile对象.
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| File | 13 webkit | 未实现 | 未实现 | 未实现 | 未实现 |
FileReader |
6 webkit | 4.0 moz | 10 | 12 | 未实现 |
| FileWriter | 13 webkit | 未实现 | 未实现 | 未实现 | 未实现 |
| FileSystem | 13 webkit | 未实现 | 未实现 | 未实现 | 未实现 |
BlobBuilder |
8 webkit | 6.0 (6.0) 4.0 moz | 10 | 未实现 | 未实现 |
| BlobURL | 8 webkit | 4.0 4.0moz | 10 | 未实现 | 未实现 |
2.Blob
一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.
创建Blob对象的方法有几种,可以调用Blob构造函数,还可以使用一个已有Blob对象上的slice()方法切出另一个Blob对象,还可以调用canvas对象上的toBlob方法.
属性
| 属性名 | 类型 | 描述 |
size |
unsigned long long |
Blob对象中所包含数据的大小. 只读.
|
type |
DOMString |
一个字符串,表明该Blob对象所包含数据的MIME类型.如果类型未知,则该值为空字符串. 只读.
|
构造函数
Blob Blob( [optional] Array parts,[optional] Blobpropertybag properties );
参数
-
parts -
一个数组,包含了将要添加到
Blob对象中的数据.数组元素可以是任意多个的ArrayBuffer,ArrayBufferView(typed array),Blob,或者DOMString对象. -
properties -
一个对象,设置
Blob对象的一些属性.查看BlobPropertyBag一节.
方法
slice()
返回一个新的Blob对象,包含了源Blob对象中指定范围内的数据.
Blob slice( optional long long start,optional long long end,optional DOMString contentType };
参数
-
start可选 -
开始索引,可以为负数,语法类似于数组的
slice方法.默认值为0. -
end可选 -
结束索引,语法类似于数组的
slice方法.默认值为最后一个索引. -
contentType可选 -
新的
Blob对象的MIME类型,这个值将会成为新的Blob对象的type属性的值,默认为一个空字符串.
返回值
一个新的Blob对象,包含了源Blob对象中指定范围内的数据.
注意
如果start参数的值比源Blob对象的size属性的值还大,则返回的Blob对象的size值为0,也就是不包含任何数据.
Blobpropertybag
-
type -
设置该
Blob对象的type属性. -
endings(已废弃) -
对应于
BlobBuilder.append()方法的endings参数.该参数的值可以是"transparent"或者"native".
Blob构造函数用法举例
下面的代码:
var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"]; var oMyBlob = new Blob(aFileParts, { "type" : "text\/xml" }); // the blob
等价于:
var oBuilder = new BlobBuilder(); var aFileParts = ["<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"]; oBuilder.append(aFileParts[0]); var oMyBlob = oBuilder.getBlob("text\/xml"); // the blob
BlobBuilder接口提供了另外一种创建Blob对象的方式,但该方式现在已经废弃,所以不应该再使用了.
例子:使用类型数组和Blob对象创建一个对象URL
使用FileList
所有type属性(attribute)为file的 <input> 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:
<input id="fileItem" type="file">
下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):
var file = document.getElementById('fileItem').files[0];
方法概述
File item(index); |
Edit属性
| 属性名 | 类型 | 描述 |
length |
integer |
一个只读的整数值,用来返回该FileList对象中的文件数量 |
方法
Edititem()
根据给定的索引值.返回FileList对象中对应的File对象.
File item( index );
Edit参数
-
index - File对象在FileList对象中的索引值,从0开始.
Edit返回值
所请求的File对象.
例子
// fileInput是一个 HTML input 元素: <input type="file" id="myfileinput" multiple> var fileInput = document.getElementById("myfileinput"); // files 是一个 FileList 对象(类似于NodeList对象) var files = fileInput.files; var file; //遍历所有文件 for (var i = 0; i < files.length; i++) { // 取得一个文件 file = files.item(i); // 这样也行 file = files[i]; // 取得文件名 alert(file.name); }
下面是一个更完整的例子.
FileReader对象,可以使用对象或者对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的对象,也可以来自拖放操作生成的 对象,还可以是来自在一个上执行.
想要创建一个很简单,如下:
如何在web应用程序中使用文件一文中有更详细的解释和例子.
方法概述
状态常量
| 常量名 | 值 | 描述 |
| 还没有加载任何数据. | ||
| 数据正在被加载. | ||
| 已完成全部的读取请求. |
属性
| 属性名 | 类型 | 描述 |
| 在读取文件时发生的错误. 只读. | ||
| 表明对象的当前状态. 值为State constants中的一个. 只读 | ||
| 读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读. |
方法
abort()
中止该读取操作.在返回时,属性的值为.
参数
无.
抛出的异常
readAsArrayBuffer()
Requires Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)开始读取指定的对象或对象中的内容. 当读取操作完成时,属性的值会成为,如果设置了.同时,属性中将包含一个以表示所读取文件的内容.
参数
- 将要读取到一个 中的 对象或者 对象.
readAsBinaryString()
开始读取指定的一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,属性中将包含所读取文件的原始二进制数据.
参数
readAsDataURL()
开始读取指定的一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,属性中将包含一个 URL格式的字符串以表示所读取文件的内容.
参数
例子
readAsText()
开始读取指定的一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,属性中将包含一个字符串以表示所读取的文件内容.
参数
事件处理程序
- 当读取操作被终止时调用.
- 当读取操作发生错误时调用.
- 当读取操作成功完成时调用.
- 当读取操作完成时调用,不管是成功还是失败.该处理程序在 或者 .
- 当读取操作将要开始之前调用.
- 在读取数据过程中周期性调用.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
