实例说明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中,这些方法也有可能会被删除.
方法概述
|
|
|
属性
属性名 | 类型 | 描述 |
| | |
| | |
| | |
| | |
| 这是一个内部使用的属性,没有做安全检查. 只读. Native code only! 非标准 Requires Gecko 2.0 | |
| | |
| | |
| | |
| | |
方法
些方法都是非标准的.想要读取一个文件的内容,你应该使用一个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
File | 13 webkit | Not supported | Not supported | Not supported | Not supported |
| 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 |
| 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
