web前端文件操作相关总结

前言

由于浏览器的安全规范、处于安全和隐患，web应用程序不允许直接访问用户设备上的文件，如果需要读取文件，则可以通过input来实现

获取文件

js不可以直接获取设备上的文件，但是可以通过用户操作的方式获取设备文件，此处使用 完成

<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