HTML5 File 对象

实例说明1：

<div class="container">
    <input type="file" id="file" multiple />
    <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" />
    <h4>
        选择文件如下:
    </h4>
</div>

//选择的文件对象 属性说明
// File对象
//lastModified: 1472428204742   //这个属性只在FF，Google中出现，在IE中不存在
//lastModifiedDate: Mon Aug 29 2016 07:50:04 GMT+0800 (中国标准时间) //文件最后修改时间
//name: "2016-08-29_075003.png" //文件名称
//size: 40278                   //文件大小 ，单位字节
//type: "image/png"             //文件的MIME类型，如果不识别为空字符串（例如:*.sql,*.mdf）
var fileBox = document.getElementById('file');
function showFiles() {
    //获取选择文件的数组
    var fileList = fileBox.files;
    console.info(fileList);
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        appendFile(file);
    }
}
function appendFile(file) {
    var block = $('<blockquote />');
    block.append('文件名：' + file.name);
    block.append('<br />');
    block.append('文件类型：' + file.type);
    block.append('<br />');
    block.append('文件大小：' + file.size);
    $('.container').append(block);
}

结果输出：

 

概要

File 接口提供了文件的信息，以及文件内容的存取方法。

对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象.

注:在Gecko中,你还可以在chrome代码中使用该API.查看在chrome代码中使用DOM File API一文了解详情.

Gecko 2.0 note

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

从Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1),开始,File对象继承了Blob接口,Blob接口提供了一些能够获取到更多文件信息的属性和方法.

注:在Gecko中,File对象提供了几个用来读取文件内容的非标准方法.你不应该使用这些方法,那会让你的应用程序不能在其他浏览器中运行,而且在未来版本的 Gecko中,这些方法也有可能会被删除.

方法概述

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应用程序中使用文件一文了解详情.

已废弃 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)

getAsBinary()

返回一个字符串,包含了文件内容的原始二进制形式.

注: 该方法已经过时,你应该使用FileReader 对象的readAsBinaryString()方法或者readAsArrayBuffer()方法来替代.

DOMString getAsBinary();

 

参数

无

返回值

一个字符串,包含了文件内容的原始二进制形式.

已废弃 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)

getAsDataURL()

返回一个将所引用文件的完整内容进行编码后的data: URL字符串.

注: 该方法已经过时,你应该使用FileReader对象的readAsDataURL()方法来代替.

DOMString getAsDataURL();

 

参数

无

返回值

一个字符串,包含了将所引用文件的文件内容进行编码后的data: URL.

已废弃 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)

getAsText()

返回一个字符串,其内容为根据参数encoding指定的编码读取文件内容形成的文本.

注: 该方法已经过时,你应该使用FileReader对象的readAsText()方法来代替.

DOMString getAsText(
  in DOMString encoding
 );

 

参数

encoding

一个字符串,表示了返回数据所使用的编码,如果不指定该参数,则默认使用UTF-8编码.

返回值

一个字符串,其内容为根据参数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对象.

浏览器兼容性

• Desktop
 
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
File	13 webkit	Not supported	Not supported	Not supported	Not supported
FileReader	6 webkit	4.0 moz	10	12	Not supported
FileWriter	13 webkit	Not supported	Not supported	Not supported	Not supported
FileSystem	13 webkit	Not supported	Not supported	Not supported	Not supported
BlobBuilder	8 webkit	6.0 (6.0) 4.0 moz	10	Not supported	Not supported
BlobURL	8 webkit	4.0 4.0moz	10	Not supported	Not supported

规范

• File upload state (HTML 5工作草案)
• File API

相关链接

• 如何在web应用程序中使用文件
• 在chrome代码中使用DOM File API
• FileReader