H5 API 实现文件读取操作
该接口通过
FileReader对象来读取本地存储的文件，然后使用File对象来指定读取的文件或数据File对象
- 可以是来自用户在一个元素上（如<input>）选择文件后返回的
FileList对象，- 可以是自由拖放操作生成的
DataTransfer对象。
(dataTransfer对象只能访问文件的一些基本的信息。)
文件的上传
由于Web环境的特殊性，为了考虑文件安全问题，浏览器不允许JavaSctipt直接访问文件系统，使用<input>表单元素的文件域\<input type="file">来实现文件的上传。
input元素还有一个multiple属性（HTML 5新增），可以实现一次上传多个文件。在用户选择文件以后，可以得到一个FileList对象，它代表所选的文件列表。
查看FileList对象
<input type="file" multiple> <script> var file = document.querySelector('input'); file.onchange = function() { // 当用户选择文件后执行此事件 console.log(this.files); // 查看FileList对象 }; </script>
FileList对象代表所选的文件列表，该对象是一个类数组的形式，其中包含一个或多个File对象。如果用户只选择了一个上传文件，那么只需要访问FileList对象的第一个元素，如果FileList对象是类数组对象，可以使用for循环遍历其内部的File对象
for(var i = 0, numFiles = files.length; i < numFiles; i++){ var files = files[i]; … }
在使用
FileReader对象前，需要使用new来实例化FileReader()构造函数，获得一个对象。然后通过这个对象的方法和事件，来实现文件的读取等不同的功能。无论文件是否读取成功，读取文件的方法都不会返回读取的结果，而是将读取结果存储到result属性中。
FileReader对象的常用方法
| 方法名称 | 参数 | 描述 |
| readAsBinaryString | file | 将文件读取为二进制编码 |
| readAsText | file,[ending] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| abort | (none) | 中断读取操作 |
FileReader对象的常用事件
| 事件名称 | 描述 |
| onabort | 读取中断时触发 |
| onerror | 读取发生错误时触发 |
| onloadstart | 读取开始时触发 |
| onprogress | 正在读取时触发 |
| onload | 读取成功时触发 |
| onloadend | 读取完成时触发（无论成功或失败） |
FileReader对象的使用
上传图片并显示略缩图
<input type="file" multiple> <div><img alt="null"></div> <script> var file = document.querySelector('input'); file.onchange = function () { // 当用户选择文件后执行此事件 console.log(this.files); // 查看FileList对象 }; //初始化盒子模型 var img= document.querySelector('img'); file.onchange = function () { // ① 初始化reader对象 var reader = new FileReader(); // ② 读取文件内容 reader.readAsDataURL(this.files[0]); // 方式2：读取图片的缩略图 // ③ 将读取的内容显示到页面中 reader.onload = function () { // 读取成功时触发 img.src = this.result; // 将生成的内容赋值为img图片的src }; } </script>
上传文档并显示文本
<input type="file" multiple> <div> </div> <script> var file = document.querySelector('input'); var div= document.querySelector('div'); file.onchange = function () {// 当用户选择文件后执行此事件 console.log(this.files); // 查看FileList对象 var reader = new FileReader();// ① 初始化reader对象 reader.readAsText(this.files[0]);// ② 读取文件内容：读取文本 // ③ 将读取的内容显示到页面中 reader.onload = function () { // 读取成功时触发 console.log('成功'); div.innerHTML = this.result; // 将生成的内容显示到页面的div元素中 }; } </script>
