ArrayBuffer 與 ArrayBufferView 及 DataView

ArrayBuffer 是一種通用的二進制數據存儲方式，ArrayBufferView 和 DataView 則提供了對這些數據的訪問和操作能力。具體內容待補充。

Blob 對象

Blob 對象是 HTML5 文件 API 的一個重要組成部分，用于表示不可變的原始二進制數據。

創建 Blob 對象

創建 Blob 對象時，可以傳入一個數組作為第一個參數，該數組可以包含以下類型的對象：

• 字符串
• ArrayBuffer
• TypedArray
• 其他 Blob 對象

通過 Blob 生成文件下載

通過瀏覽器的 URL.createObjectURL 方法，可以基于 Blob 對象的二進制數據生成一個 URL 地址。當用戶訪問該 URL 時，瀏覽器會自動觸發文件下載操作。例如：

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
a.click();
URL.revokeObjectURL(url);

Blob 對象的 slice 方法

slice 方法用于從 Blob 對象中提取部分數據，返回一個新的 Blob 對象。例如：

const blob = new Blob(['Hello, world!']);
const slicedBlob = blob.slice(0, 5); // 提取前 5 個字節

FileReader 對象

FileReader 對象主要用于將文件數據讀入內存，并提供多種讀取文件內容的方式。

常見事件

FileReader 提供了一系列事件，用于處理文件讀取的不同階段：

• onabort：數據讀取被中斷時觸發。
• onerror：數據讀取發生錯誤時觸發。
• onloadstart：數據讀取開始時觸發。
• onprogress：數據讀取過程中觸發。
• onload：數據讀取成功完成時觸發。
• onloadend：數據讀取完成時觸發，無論成功還是失敗。

常用方法

FileReader 提供了多種方法來讀取文件內容：

• readAsArrayBuffer：將文件讀取為 ArrayBuffer。
• readAsBinaryString：將文件讀取為二進制字符串。
• readAsDataURL：將文件讀取為 Data URL。
• readAsText：將文件讀取為文本。

FileReader readAsArrayBuffer 示例

以下是一個使用 FileReader 的示例代碼，該代碼讀取文件的前 4 個字節，并判斷文件類型：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const arrayBuffer = e.target.result;
    const dataView = new DataView(arrayBuffer);
    const fileType = dataView.getUint32(0, false); // 讀取前 4 個字節
    console.log(文件類型: ${fileType});
  };  const blob = file.slice(0, 4); // 提取前 4 個字節
  reader.readAsArrayBuffer(blob);
});

總結

HTML5 文件 API 提供了強大的工具，用于處理文件的讀取和操作。通過 Blob 對象可以輕松創建和操作二進制數據，而 FileReader 則為文件讀取提供了便捷的接口。這些功能為開發者實現文件上傳、下載以及數據處理等功能提供了極大的便利。

參考鏈接

本文鏈接： https://lidong.me/blog/web-file-api/

原文鏈接: https://lidong.me/blog/web-file-api/