file 供应文件有关的信息
1. file对象
file对象的泉源平常分为３种：
（１）在<input type='file'>元素上挑选上传文件后返回的Filelist对象；
（２）由拖放操纵发作的DataTransfer对象；
（３）HTMLCanvasElement的mozGetAsFile() API；
此处议论的是第一种，猎取file对象：
let file = e.target.files[0];//猎取file 对象，当上传多个文件（图片）时，０示意第一个属性：
lastModified: 1496803445926;//所援用文件末了修正时刻
lastModifiedDate: Wed Jun 07 2017 10:44:05 GMT+0800 (CST) {};//所援用文件末了修正时刻的 Date 对象
name: "多Y图.svg";//所援用文件的名字
size: 1384;//返回文件的大小
type: "image/svg+xml";//返回文件的 多用途互联网邮件扩大范例
webkitRelativePath: "";//返回 File 相干的 path 或 URL
另，多张图片的上传道理相似，需注重以下三点：
1.设置multiple
2.经由过程轮回掏出每张图片，放到指定处所
3.每次轮回的时刻从新new FileReader()对象
2. FileReader()对象
FileReader() 许可web应用顺序异步读取存储在用户盘算机上的文件（或原始数据缓冲区）的内容，运用 File 或 Blob 对象指定要读取的文件或数据。
let reader = new FileReader();//建立新对象属性:
error: 读取文件时发作的毛病；
readyState: 表明FileReader对象的当前状况；
result: 读取到的文件内容，只在读取操纵完成后才有用，数据花样取决于采纳的读取操纵；
要领:
- abort()： 中断该读取操纵。
- readAsText(file, encoding)：以纯文本的情势读取，result中的数据为字符串。
- readAsDataURL(file)：result属性中将包括一个data:url花样的字符串。
- readAsArrayBuffer(file): result属性中将包括一个ArrayBuffer对象。
- readAsBinaryString(file)：读取文件的二进制源码。
事宜处置惩罚顺序
- onabort: 当读取操纵被中断时挪用
- onerror：当读取操纵发作毛病时挪用
- onload: 当读取操纵胜利完成时挪用
- onloadend: 当读取操纵完成时（不论胜利照样失利），在onload或许onerror以后挪用
- onloadstart: 当读取操纵将要开始时挪用
- onprogress: 在读取数据过程当中周期性挪用
3.示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>read</title>
</head>
<body>
<input type="file" id="file" onchange="handleFiles(this.files)"/>
<div id="filecontent"></div>
<script>
function handleFiles(files){
if(files.length) {
var file = files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("filecontent").innerHTML = e.target.result;
};
reader.readAsText(file);
}
}
</script>
</body>
</html>