File API 读取上传的文件

1, 在html 文档中，<input type="file"> 我们可以选择文件进行上传，但这时只能上传一个文件。如果加上multiple 属性，可以上传多个文件，上传多个文件时要按shift 或 ctrl进行选择。

<input type="file" multiple id="file">

2， file API  就是提供了一些接口来读取我们上传的文件。input 元素 在js 就是一个对象，它有一个files属性，表示我们上传的文件。它是一个类数组，有一个length 属性，表示我们上传了多少个文件。要想访问其中的一个文件，提供一个索引值， 如果只上传了一个文件，那就是files[0].  每个文件也有一系列属性：name, type, size 等。

var file = document.getElementById("file"); //  得到<input type="file"> 这个元素。

file.files[0]  // 得到上传的第一个文件。

file.files[0].name // 得到文件名称。　　　　

3， 当选择文件进行上传后，会触发change 事件，可以监听该事件获得我们上传的文件信息。

<input type="file" multiple id="file">;

<script>
　　var file = document.getElementById("file");
　　file.addEventListener("change", fileInfo);
　　function fileInfo(){
	let fileList = this.files;
	for(let i=0; i<fileList.length; i++){
	　　console.log(fileList[i].name, fileList[i].type);
	}
　　}
</script>

4, FileReader API 提供了更进一步的读取文件的接口，可以读取文件并把结果保存起来。例如 可以读取我们上传的图片并把图片显示到html文档中。 但该API 读取文档是异步的，和AJAX 的用法一致。

1， 创建一个filereader 对象， var reader = new FileReader();

2,  读取文件，有以下几个方法 读取文件, 它们接受一个参数，就是我们上传的文件，读取结果保存在该对象的result属性中。

　　readAsText(), 读取文件内容，结果为一串代表文件内容的文本；

　　readAsDataURL(), 读取文件内容，结果为一个 data: 的 URL；

　  readAsBinaryString 读取文件内容，结果为一个 二进制字符串；

3， 异步读取， 所以需要监听事件， 有三个重要的事件，progress事件，文件读取过程中不停地触发； load事件，读取完毕时触发；error 读取过程中有问题时触发。

4, 读取成功后的回调函数。

5, 其实file(我们上传的文件file[0]) 还有一个slice 方法，对我们上传的文件进行分割， 获取部分数据。 它接受两个参数，读取的起始位置，读取的结束位置（但不包括此位置）；和数组的slice 方法是一致的，只不过这里是，返回的是我们截取到文件， 这时可以读取到这个文件。readAsText（）；