前言
由于浏览器的安全规范、处于安全和隐患，web应用程序不允许直接访问用户设备上的文件，如果需要读取文件，则可以通过input来实现
获取文件
js不可以直接获取设备上的文件，但是可以通过用户操作的方式获取设备文件，此处使用 input完成
<input type="file" id="ipt">
如果获取多个文件 添加 multiple属性
<input type="file" id="ipt" multiple>
文件类型的input有change事件监听文件的改变、有files属性获取选择的文件数组
var ipt=document.getElementById('ipt');
ipt.onchange=function(){
...this.files --得到所选文件
... 接下来进行文件处理
}
处理文件
Html5提供了一个读取文件的对象 FileReader
FileReader用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件，使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。
创建方式
var reader = new FileReader()
读取文件方法
abort() 终止文件读取
readAsArrayBuffer(file) //按字节读取文件 结果用ArrayBuffer对象表示
readAsBinaryString(file)//按细节读取文件 结果为文件的二进制字符串
readAsDataURL(file) // 结果用base64格式表示
readAsText(file) //按字符读取文件 结果用字符串形式表示：
四种读取方式解释：
readAsDataURL
会将文件内容进行base64编码后输出
readAsText :
可以通过不同的编码方式读取字符 readAsText读取文件的单位是字符，所以对于文本文件，按照规定读取即可，但是对 于图片、音频、视频 内部组成并不是字符 所以采用readAsText会产生乱码
readAsBinaryString：
readAsBinaryString会按照字节读取文件内容，然而类似0101的二进制数据只能被计算机读取，若要对外可见，需要进行编码，readAsBinaryString的结果就是读取二进制数据并编码后的内容。
尽管readAsBinaryString是按照字节读取文件，但由于读取后的内容被编码为字符，大小会受到影响，会比图片原大小 大，体积会被扩充所以不适合直接传输 不推荐使用
readAsArrayBuffer：
按字节读取文件内容，并转换为ArrayBuffer对象 读取后的大小与源文件大小一样 readAsArrayBuffer读取文件后，会在内存中创建一个ArrayBuffer对象(二进制缓冲区)， 将二进制数据放置其中 可以直接在网络中传输二进制内容。 ArrayBuffer对象的内容对外是不可见的 若要查看内容 需要使用类型化数组
FileReader事件
onabort 读取操作被终止时候调用
onerror 读取操作发生错误时调用
onload 读取操作完成时候调用
onloadend 读取操作完成时候调用 不管成功或者失败
onloadstart 读取操作将要开始之前调用
onprogress 读取过程中周期性调用
图片预览方式
FileReader读取后显示
..参照上文
window.URL.createObjectURL(file)
var file = ipt.files[0];
//会得到一个临时路径 使用 img 的src展示即可
var url = window.URL.createObjectURL(file);
img.src = url
