[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 }); } } }); } ~~~