[TOC] ## 1. Blob对象 > 1. Blob表示一个不可变、原始数据的类文件对象，Blob 表示的不一定是JavaScript原生格式的数据。 > 2. blob对象本质上是js中的一个对象，是一个存储二进制数据的容器 > 3. 可以用于文件分片 ### 1.1 构造函数 Blob(blobParts[, options]) 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。 第一个参数为一个数据序列，可以是任意格式的值。 第二个参数是一个包含两个属性的对象{ type: MIME的类型, endings: 决定第一个参数的数据格式，可以取值为 "transparent" 或者 "native"（transparent的话不变，是默认值，native 的话按操作系统转换） 。 } ## 2. File对象 > 1. File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 ## 3. FileReader对象 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 ### 3.1 提供的事件回调机制 #### 1. FileReader.onabort > 处理abort事件。该事件在读取操作被中断时触发。 #### 2. FileReader.onerror > 处理error事件。该事件在读取操作发生错误时触发。 #### 3. FileReader.onload > 处理load事件。该事件在读取操作完成时触发。文件数据存放在target.result中。 #### 4. FileReader.onloadstart > 处理loadstart事件。该事件在读取操作开始时触发。 #### 5. FileReader.onloadend > 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。 #### 6. FileReader.onprogress > 处理progress事件。该事件在读取Blob时触发。 ### 3.2 方法 读取方法 #### 1. FileReader.abort() > 中止读取操作。在返回时，readyState属性为DONE。 #### 2. FileReader.readAsArrayBuffer() > 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象. #### 3. FileReader.readAsBinaryString() > 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。 #### 4. FileReader.readAsDataURL() > 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。 #### 5. FileReader.readAsText() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。 ### 3.1 应用一、上传照片预览 将 input type=file 打开的文件，显示到img标签上 html ~~~ <div class="col-sm-2"> <img id="headImg" name="headImg" src="${session.moocUser.headImg!}" alt="headImg" class="img-circle img-responsive" style="width: 100px;height: 100px"> </div> <div style="margin-top: 7px;margin-left: 7px;"> <label for="image-input" class=" btn btn-default btn-sm" style="background-color: #007bff">更换头像</label> <input type="file" id="image-input" style="display: none;" onchange="changImg(event)"> </div> ~~~  js ~~~ //选择头像 function changImg(e) { var file = e.target.files[0]; if(file.size < 1048576) { //实例化FileReader API var freader = new FileReader(); freader.readAsDataURL(file); //将文件对象，读取为Url的形式 freader.onload = function (e) { //文件读取完成后触发 $("#headImg").attr("src", e.target.result); }; $('#submitPic').attr("disabled", false); //将选择的图片，放到image标签当中 }else { layer.msg("图片不能超过1Mb！", { icon: 2, time:1500 }); } } //上传头像 function editInfo() { var img= $("#image-input")[0].files[0]; var userId = $("#nickName").attr("tag"); console.log(img); if(img) { var formData = new FormData(); formData.append('headImg', img); formData.append("id",userId); $.ajax({ url: Aexit.ctxPath + "/personal/update", type: 'POST', cache: false, data: formData, dataType:'json', processData: false, contentType: false, success: function (data) { if (data.code === 0) { layer.msg(data.message, { icon: 1, time:1500 }); setTimeout("window.location.reload()",1500); } else { layer.msg(data.message, { icon: 2, time:1500 }); } } }); } ~~~