在表单中我们会用到上传文件的操作，现就文件相关API做以下总结。
文件相关的对象主要有5个。
Blob对象: 是一个代表二进制数据的基本对象。构造函数有两个参数，第一个参数为实际数据的数组，第二个为数据类型。
-
File对象: 负责处理那些以文件形式存在的二进制数据，也就是操作本地文件。它是FileList对象的成员，包含了文件的一些元信息。有如下属性值：
- name: 文件名。
- size: 文件大小，单位为字节。
- type: 文件的MIME类型。
- lastModified: 文件的上次修改时间，格式为时间戳。
- lastModifiedDate: 文件的上次修改时间，格式为Date对象实例。
FileList对象: 针对表单的file控件。当用户通过file控件选取文件后，这个控件的files属性值就是FileList对象。它在结构上类似于数组，包含用户选取的多个文件。
-
FileReader对象: 负责将二进制数据读入内存内容。采用异步方式读取文件，可以为一系列事件指定回调函数。有多种读取文件的方式。
- readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。
- readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’。
- readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。
- readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象。
- abort()：中止读取操作。
除了上述方法外，还拥有三个只读属性。 - readyState：FileReader对象的当前状态。
- result：读取到的文件内容。
- error：在读取文件时发生的错误。
事件有load,loadstart,loadend,error,abort,progress。
-
URL对象: 用于生成指向File对象或Blob对象的URL。
- createObjectURL(blob) 会对二进制数据生成一个URL。
- revokeObjectURL(objectURL) 使URL失效。
代码说明：
//css
.wrap {
position: relative;
}
.hide {
width: 100px;
height: 30px;
position: absolute;
left: 0;
z-index: 22;
opacity: 0;
cursor: pointer
}
.wrap span {
height: 30px;
width: 100px;
position: absolute;
left: 0;
z-index: 11;
color: blue;
cursor: pointer;
}
//html
<div class="wrap">
<input type="file" id="file" class="hide">
<span>上传文件</span>
</div>
//js
var fileDom = document.getElementById("file");
fileDom.addEventListener('change',function(e){
console.log(e.target.files); // e.target.files === fileDom.files
console.log(fileDom.files)
var reader = new FileReader();
reader.readAsText(e.target.files[0]);
reader.onload = function (e) {
console.log(e.target.result); //e.target.result === reader.result
console.log(reader.result);
}
var s = URL.createObjectURL(e.target.files[0])
console.log(s)
})
