完全弄懂文件和二進制數據的操做

時間 2019-11-16

標籤完全弄懂文件二進制數據简体版

原文原文鏈接

Blob Blob 對象表示一個不可變、原始數據的類文件對象。Blob 表示的不必定是JavaScript原生格式的數據。File 接口基於Blob，繼承了 blob 的功能並將其擴展使其支持用戶系統上的文件。
要從其餘非blob對象和數據構造一個Blob，請使用 Blob() 構造函數。要建立包含另外一個blob數據的子集blob，請使用 slice()方法。要獲取用戶文件系統上的文件對應的Blob對象，請參閱 File文檔。javascript
FileList 這個對象一般來自於一個HTML input元素的files屬性,你能夠經過這個對象訪問到用戶所選擇的文件
File 接口提供有關文件的信息，並容許網頁中的 JavaScript 訪問其內容。
FileReader FileReader 對象容許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。
其中File對象能夠是來自用戶在一個<input>元素上選擇文件後返回的FileList對象,也能夠來自拖放操做生成的 DataTransfer對象,還能夠是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果。html
URL （ie瀏覽器不支持）

1.Blob 對象

Blob（Binary Large Object）對象表明了一段二進制數據。其它操做二進制數據的接口都是創建在此對象的基礎之上。
java

生產Blob對象的方法：1.使用Blob 構造函數，2.對已有的Blob對象slice方法切割成小部分，應用場景有：大文件的斷點續傳。web

（1）Blob 構造函數接收兩個參數。第一個參數是數組，第二個參數是對象。這兩個參數都是非必須的。ajax

let blob = new Blob(["Hello World"],{ "type" : "text\/xml" });
let a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "hello-world.txt";
a.textContent = "點擊我，能夠生產一個hello-word.txt的文件";
document.body.appendChild(a);複製代碼

（2）Blob對象的slice方法，用來切割生成多個新的Blob對象。
canvas

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  let blob = this.files[0];  //經過此方法獲取的數據爲二進制數據

  const BYTES_PER_CHUNK = 1024 * 1024; // 定義切割單元1M
  const TOTLE_SIZE = blob.size;  //文件的總大小

  let start = 0;
  let end = BYTES_PER_CHUNK;

  while(start < TOTLE_SIZE ) {   //將 blob.slice(start, end) 做爲數據，分割上傳文件到服務器，再由服務端把分離的二進制數據合併爲一個完整的數據
    // 注意：ajax中，xhr.responseType 設置爲blob,那麼服務器接收的就是二進制數據。
    // 在上傳過程當中，若是斷網，斷電，或者用戶刷新啦頁面，可能有部分未上傳成功的二進制小塊。那個下次上傳的時候
    // 就能夠只上傳未上傳成功的部分資源。固然這須要服務器端的配合。 start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);複製代碼

2.FileList對象

FileList對象針對<input type='file' multiple />標籤。當用戶經過<input type='file' multiple/>標籤選取文件後，這個標籤的files屬性值就是FileList對象。它在結構上相似於數組，包含用戶選取的多個文件。api

<input type="file" id="input" onchange="console.log(this.files)" multiple />
//選擇了兩個文件後，控制檯能夠看到FileList對象中有兩個File，分別是選擇文件的二進制數據。
複製代碼

圖1-1 File打印結果數組

如今的用戶比較懶，每每喜歡拖拉拽的方式。使用拖拉拽的方式也能夠獲得FileList,能夠就方便用戶上傳文件了。瀏覽器

let dropZone = document.getElementById('body');
dropZone.addEventListener('drop', handleFileSelect, false);
//防止把文件拖入網頁時，資源以url的形式打開。
dropZone.ondragover = function () { return false; };
function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    let files = evt.dataTransfer.files; // 裏面包含了拖放的文件。
    console.log(files )    
}複製代碼

3.File API

File API提供File對象，它是FileList對象的成員，包含了文件的一些元信息，好比文件名、上次改動時間、文件大小和文件類型。(如圖1-1)
bash

4.FileReader API

FileReader API用於讀取文件，即把文件內容讀入內存。它的參數是File對象或Blob對象。

對於不一樣類型的文件，FileReader提供不一樣的方法讀取文件。

readAsBinaryString(Blob|File)：返回二進制字符串，該字符串每一個字節包含一個0到255之間的整數。（此方法已經廢棄，官方推薦使用readAsArrayBuffer() ）
readAsText(Blob|File, opt_encoding)：返回文本字符串。默認狀況下，文本編碼格式是’UTF-8’，能夠經過可選的格式參數，指定其餘編碼格式的文本(能夠獲取本地.txt ，.bat等文件內容，讀取word,excell會亂碼)。
readAsDataURL(Blob|File)：返回一個基於Base64編碼的data-url對象。
readAsArrayBuffer(Blob|File)：返回一個ArrayBuffer對象。

FileReader對象採用異步方式讀取文件，能夠爲一系列事件指定回調函數。

onabort方法：讀取中斷或調用reader.abort()方法時觸發。
onerror方法：讀取出錯時觸發。
onload方法：讀取成功後觸發。
onloadend方法：讀取完成後觸發，無論是否成功。觸發順序排在 onload 或 onerror 後面。
onloadstart方法：讀取將要開始時觸發。
onprogress方法：讀取過程當中週期性觸發

網頁獲取.txt , .bat 文本內容
let reader = new FileReader();
reader.onload = function(e) {
  //console.log(e.target.result);
console.log(this.result);}
reader.readAsText(blob);複製代碼

5.URL對象

URL對象用於生成指向File對象或Blob對象的URL。

let objecturl =  URL.createObjectURL(object);  //object File對象、Blob對象、MediaSource對象。
img.src = objecturl   //跟readFile 對象差很少。一樣能夠展現圖片在網頁上

//window.URL.revokeObjectURL(objecturl);  //讓url對象失效複製代碼

上面的代碼會對二進制數據生成一個URL，相似於「blob:http%3A//test.com/2342e6730-f45c-47c1-8012-ccc706f17192」。這個URL能夠放置於任何一般能夠放置URL的地方，好比img標籤的src屬性。須要注意的是，即便是一樣的二進制數據，每調用一次URL.createObjectURL方法，就會獲得一個不同的URL。

這個URL的存在時間，等同於網頁的存在時間，一旦網頁刷新或卸載，這個URL就失效。除此以外，也能夠手動調用URL.revokeObjectURL方法，使URL失效。

參考：

www.w3.org/TR/FileAPI/

developer.mozilla.org/zh-CN/docs/…

javascript標準參考教程（alpha）

developer.mozilla.org/zh-CN/docs/…