JavaScript文件处理对象
一、 class FileReader
该对象属于class对象，继承自 EventTarget，用于加载文件类型数据。
FileReader.proto === EventTarget
FileReader.prototype.proto === EventTarget.prototype
EventTarget.proto === Function.prototype
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。
-
方法&读取
下列方法为读取数据文件，一旦开始读取，实例的 result属性都会被填充。读取失败，则 result的值为 null，否则即是读取的结果
FileReader.readAsArrayBuffer(file) -- 将文件读取ArrayBuffer对象 FileReader.readAsBinaryString(file) -- 将文件读取为二进制码 FileReader.readAsDataURL(file) -- 将文件读取为 DataURL FileReader.readAsText(file) -- 将文件读取为文本 -
方法&中断
FileReader.abort() 中止读取操作。在返回时，readyState属性为DONE。 -
属性
FileReader.error 只读 一个DOMException，表示在读取文件时发生的错误 。 FileReader.readyState 只读 表示FileReader状态的数字。取值如下： 常量名 值 描述 EMPTY 0 还没有加载任何数据. LOADING 1 数据正在被加载. DONE 2 已完成全部的读取请求. FileReader.result 只读 文件的内容。该属性仅在读取操作完成后才有效，数据 的格式取决于使用哪个方法来启动读取操作 -
事件处理
因为 FileReader 继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。
FileReader.onabort 处理abort事件。该事件在读取操作被中断时触发。 FileReader.onerror 处理error事件。该事件在读取操作发生错误时触发。 FileReader.onloadstart 处理loadstart事件。该事件在读取操作开始时触发。 FileReader.onprogress 处理progress事件。该事件在读取Blob时触发。 FileReader.onload 处理load事件。该事件在读取操作完成时触发。 FileReader.onloadend 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
二、Blob 构造函数
该对象属于顶层内置构造函数，构造二进制类型文件。
Blob.proto === Function.prototype
Blob.prototype.proto === Object.prototype
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 对象表示的不一定是JavaScript原生格式的数据。File 类（class） 继承了 Blob 构造函数的功能并将其扩展使其支持用户系统上的文件。要从其他非Blob对象和数据构造一个Blob对象，请使用 Blob()构造函数。
要创建包含另一个Blob对象数据的子集Blob对象，请使用 Blob.slice()方法。要获取用户文件系统上的文件对应的Blob对象，请参查阅File函数对象的使用。接受Blob对象的API也被列在 File 函数文档中。
-
构造
var aBlob = new Blob(array, options);
-
属性
Blob.size 只读 Blob 对象中所包含数据的大小（字节）。 Blob.type 只读 一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。 -
方法
Blob.slice(start, end, contentType)Blob() 构造函数 允许用其它对象创建 Blob 对象。比如，用字符串构建一个 blob
var debug = {hello: "world"}; var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});从Blob中读取内容的唯一方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取
var reader = new FileReader(); reader.addEventListener("loadend", function() { // reader.result 包含转化为类型数组的blob }); reader.readAsArrayBuffer(blob);
三、class File
继承自 Blob构造函数
File.proto === Blob
File.prototype.proto === Blob.prototype
通常情况下， File 对象是来自用户在一个<input>元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的DataTransfer对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。File 对象是特殊类型的Blob，且可以用在任意 Blob 类型的 context 中。比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob和 File。
-
构造
var myFile = new File(bits, name, options)
-
属性
File 接口也继承了 Blob 接口的属性File.lastModified 只读 返回当前 File 对象所引用文件最后修改时间， 自 1970年1月1日0:00 以来的毫秒数。 File.lastModifiedDate 只读 返回当前 File 对象所引用文件最后修改时间的 Date 对象。 File.name 只读 返回当前 File 对象所引用文件的名字。 File.size 只读 返回文件的大小。 File.webkitRelativePath 只读 返回 File 相关的 path 或 URL。 File.type 只读 返回文件的 MIME 类型 -
方法
File 接口没有定义任何方法，但是继承了 Blob 接口的方法。
四、示例(多文件上传)：
Html：
/*multiple 属性规定输入字段可选择多个值。*/
<input type="file" id="inupuId" onchange="showImg(this)" multiple="multiple"
accept="image/x-png, image/jpg, image/jpeg, image/gif">
<div id="imgDiv"></div>
<button id="addEleButton" style="display:none">添加</button>
JavaScript：
function showImg(file){
for(var i=0;i<file.files.length;i++){
console.log(JSON.stringify(file.files[i]))
/*定义一个FileReader对象*/
var rf = new FileReader();
/*从INPUT元素中获取File对象*/
rf.readAsDataURL(file.files[i]);
/*使用FileReader对象来处理File对象*/
rf.onload = function(event){
/*获取结果数据*/
/*event.target 属性返回哪个 DOM 元素触发了事件。*/
var srcpath = event.target.result;
var img = document.createElement("img");
img.src = srcpath;
img.style.width = "200px";
img.style.height = "aotu";
$("#imgDiv").append(img);
$("#addEleButton").show();
}
}
}
/*触发点击事件，移除文件*/
$("#imgDiv").click(function(event){
/*移除当前点击元素*/
event.target.parentNode.removeChild(event.target);
$("#inupuId").trigger("click");//触发被选元素的事件类型
})
/*触发点击事件*/
$("#addEleButton").click(function(){
$("#inupuId").trigger("click");
})