快捷導(dǎo)航

JS前端使用Blob和File讀取文件的操作代碼

更新時間：2022年11月04日 10:27:39 作者：zhq2005095

JavaScript?無法處理二進(jìn)制數(shù)據(jù)。如果一定要處理的話，只能使用?charCodeAt()?方法，一個個字節(jié)地從文字編碼轉(zhuǎn)成二進(jìn)制數(shù)據(jù)，還有一種辦法是將二進(jìn)制數(shù)據(jù)轉(zhuǎn)成?Base64?編碼，再進(jìn)行處理，這篇文章主要介紹了JS前端使用Blob和File讀取文件,需要的朋友可以參考下

歷史上，JavaScript 無法處理二進(jìn)制數(shù)據(jù)。如果一定要處理的話，只能使用 charCodeAt() 方法，一個個字節(jié)地從文字編碼轉(zhuǎn)成二進(jìn)制數(shù)據(jù)，還有一種辦法是將二進(jìn)制數(shù)據(jù)轉(zhuǎn)成 Base64 編碼，再進(jìn)行處理。這兩種方法不僅速度慢，而且容易出錯。ECMAScript 5 引入了 Blob 對象，允許直接操作二進(jìn)制數(shù)據(jù)。

Blob

對象是一個代表二進(jìn)制數(shù)據(jù)的基本對象，在它的基礎(chǔ)上，又衍生出一系列相關(guān)的API，用來操作文件。

File對象：負(fù)責(zé)處理那些以文件形式存在的二進(jìn)制數(shù)據(jù)，也就是操作本地文件；
FileList對象：File對象的網(wǎng)頁表單接口；
FileReader對象：負(fù)責(zé)將二進(jìn)制數(shù)據(jù)讀入內(nèi)存內(nèi)容；
URL對象：用于對二進(jìn)制數(shù)據(jù)生成URL Blob

Blob (Binary Large Object) 對象代表了一段二進(jìn)制數(shù)據(jù)，提供了一系列操作接口。其他操作二進(jìn)制數(shù)據(jù)的API（比如 File 對象），都是建立在 Blob 對象基礎(chǔ)上的，繼承了它的屬性和方法。

創(chuàng)建 Blob 類型的對象

生成 Blob 對象有兩種方法：一種是使用 Blob 構(gòu)造函數(shù)，另一種是對現(xiàn)有的 Blob 對象使用 slice 方法切出一部分。

1. new Blob()

Blob 構(gòu)造函數(shù)，接受兩個參數(shù)。第一個參數(shù)是一個包含實際數(shù)據(jù)的數(shù)組，這個數(shù)組中的元素可以為 DOMString ，或者 ArrayBuffer ，第二個參數(shù)是數(shù)據(jù)的類型，這兩個參數(shù)都不是必需的。

var domstring = '<div>Hello world</div>';
var blob1 = new Blob([domstring], {type: 'text/html'});
var buffer = new ArrayBuffer(8);
var blob2 = new Blob([buffer], {type: 'text/plain'});

2. blob.slice()

此方法返回一個新的 Blob 對象，包含了原 Blob 對象中指定范圍內(nèi)的數(shù)據(jù)

Blob.slice(start:number, end:number, contentType:string)。start：開始索引，默認(rèn)為0；end：截取結(jié)束索引（不包括end）；contentType：新Blob的MIME類型，默認(rèn)為空字符串

Blob 對象的屬性

Blob.size: Blob 對象中所包含數(shù)據(jù)的大小（字節(jié)）。該屬性為只讀；
Blob.type: 一個字符串，表明該 Blob 對象所包含數(shù)據(jù)的 MIME 類型。如果類型未知，則該值為空字符串。該屬性為只讀

Blob 應(yīng)用實例

下面是一個使用XMLHttpRequest對象，將大文件分割上傳的例子。

function upload(blobOrFile) {
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/server', true);
  xhr.onload = function(e) {};
  xhr.send(blobOrFile);
}

document.querySelctor('input[type="file"]').addEventListener('change', function() {
  let blob = this.files[0];
  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk size
  const SIZE = blob.size;
  let start = 0;
  let end = BYTES_PER_CHUNK;
  while(start < end) {
    upload(blob.slice(start, end));
    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

File

File 接口提供有關(guān)文件的信息，并允許網(wǎng)頁中的 JavaScript 訪問其內(nèi)容。

File 對象可以用來獲取某個文件的信息，還可以用來讀取這個文件的內(nèi)容。通常情況下， File 對象是來自用戶在一個 <input> 元素上選擇文件后返回的 FileList 對象，也可以是來自由拖放操作生成的 DataTransfer 對象。

用戶在選擇一個或者多個文件后，可以通過 File API訪問這些File 對象，這些對象被包含在一個 FileList 對象中。所有 type 為 file 的 input 都有一個 files 屬性，通過 Element.files 可以返回 FileList 對象。

<body>
    <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
    <script>
        var fileInput = document.querySelector("#fileInput");
        fileInput.addEventListener("change", function (event) {
          // 文件列表對象
          var fileList = this.files;
          // 獲取第一個文件
          var file = fileInput.files[0];
          // 文件名
          var filename = file.name;
          // 文件大小
          var filesize = file.size;
          //文件的 MIME 類型，如果分辨不出類型，則為空字符串，該屬性只讀
          var type = file.type; 
          // 文件的上次修改時間，格式為時間戳
          var lastModified = file.lastModified;
          // 文件的上次修改時間，格式為 Date 對象實例
          var lastModifiedDate = file.lastModifiedDate;
        }, false);

        console.log(fileList);
        // 上傳了兩個文件，F(xiàn)ileList {0: File, 1: File, length: 2}
    </script>
</body>

File 對象的屬性:

name：文件名，該屬性只讀。
size：文件大小，單位為字節(jié)，該屬性只讀。
type：文件的 MIME 類型，如果分辨不出類型，則為空字符串，該屬性只讀。
lastModified：文件的上次修改時間，格式為時間戳。
lastModifiedDate：文件的上次修改時間，格式為 Date 對象實例

File 對象的方法：

File 接口沒有定義任何方法，但是它從 Blob 接口繼承了以下方法：

Blob.slice([start[, end[, contentType]]])

返回一個新的 Blob 對象，它包含有源 Blob 對象中指定范圍內(nèi)的數(shù)據(jù)。

FileReader

我們知道 Blob 對象只是二進(jìn)制數(shù)據(jù)的容器，本身并不能操作二進(jìn)制，FileReader 對象就是專門操作二進(jìn)制數(shù)據(jù)的，FileReader 主要用于將文件內(nèi)容讀入內(nèi)存，通過一系列異步接口，可以在主線程中訪問本地文件。

構(gòu)造函數(shù)

var reader = new FileReader();

屬性

FileReader.error：表示在讀取文件時發(fā)生的錯誤；
FileReader.readyState：0-還沒有加載任何數(shù)據(jù), 1-數(shù)據(jù)正在被加載, 2-已完成全部的讀取請求；
FileReader.result：文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個方法來啟動讀取操作。

事件

FileReader.onabort：處理 abort 事件。該事件在讀取操作被中斷時觸發(fā)；
FileReader.onerror：處理 error 事件。該事件在讀取操作發(fā)生錯誤時觸發(fā)；
FileReader.onload：處理 load 事件。該事件在讀取操作完成時觸發(fā)；
FileReader.onloadstart：處理 loadstart 事件。該事件在讀取操作開始時觸發(fā)；
FileReader.onloadend：處理 loadend 事件。該事件在讀取操作結(jié)束時（要么成功，要么失?。┯|發(fā)；
FileReader.onprogress：處理 progress 事件。該事件在讀取 Blob 時觸發(fā)

方法

FileReader.abort()：中止讀取操作。在返回時，readyState 屬性為DONE；
FileReader.readAsArrayBuffer()：開始讀取指定的 Blob 中的內(nèi)容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數(shù)據(jù)對象；
FileReader.readAsBinaryString()：開始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù), 該方法將文件讀取為二進(jìn)制字符串，通常我們將它傳送到后端，后端可以通過這段字符串存儲文件；
FileReader.readAsDataURL()：開始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含一個 data: URL 格式的字符串以表示所讀取文件的內(nèi)容；
FileReader.readAsText()：開始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含一個字符串以表示所讀取的文件內(nèi)容, 該方法有兩個參數(shù)，其中第二個參數(shù)是文本的編碼方式，默認(rèn)值為 UTF-8。這個方法非常容易理解，將文件以文本方式讀取，讀取的結(jié)果即是這個文本文件中的內(nèi)容。

實際應(yīng)用

上傳圖片后直接進(jìn)行預(yù)覽，而不用先經(jīng)過后臺。

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        var reader = new FileReader();
        // 將圖片轉(zhuǎn)成DataURL格式
        reader.readAsDataURL(file);
        reader.onload = function(){
            //讀取完畢后輸出結(jié)果
           document.getElementById("file_img").src = reader.result //顯示上傳的圖片
           console.log(reader.result);
        }
    }
}

URL

URL.createObjectURL(blob)

//blob參數(shù)是一個File對象或者Blob對象.
var objecturl =  window.URL.createObjectURL(blob);

上面的代碼會對二進(jìn)制數(shù)據(jù)生成一個 URL ，這個 URL 可以放置于任何通?？梢苑胖?URL 的地方，比如 img 標(biāo)簽的 src 屬性。需要注意的是，即使是同樣的二進(jìn)制數(shù)據(jù)，每調(diào)用一次 URL.createObjectURL 方法，就會得到一個不一樣的 URL。

這個 URL 的存在時間，等同于網(wǎng)頁的存在時間，一旦網(wǎng)頁刷新或卸載，這個 URL 就失效。（File 和 Blob 又何嘗不是這樣呢）除此之外，也可以手動調(diào)用 URL.revokeObjectURL 方法，使 URL 失效。

URL.revokeObjectURL(objectURL);

當(dāng)不再需要這些 URL 對象時，每個對象必須通過調(diào)用 URL.revokeObjectURL() 方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時機主動釋放掉它們。

實際應(yīng)用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上傳</title>
    <script src="./lib/jquery.js"></script>
    <style type="text/css">
        #file{
            display: block;
            width: 400px;
            height: 300px;
            opacity:0;
            margin: -300px 0 0 0;            
        }
        #preview{
            display: block;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img id="preview" src="" alt="點擊上傳圖片"/>
    <input type="file" id="file" />
</body>
</html>
<script type="text/javascript">
  $('#file').on('change', function(){
    //獲取文件列表對象
    var fileList = $('#file')[0].files;
    //創(chuàng)建文件流獲取文件地址
    var src = window.URL.createObjectURL(fileList[0]); 　　　　
    //設(shè)置圖片路徑  
    $("#preview").attr("src", src);
    $("#preview").load(function() {
      window.URL.revokeObjectURL(src);
    });
　});
</script>