FileReader
注意：此功能在 Web Workers 中可用。
FileReader 介面允許 Web 應用程式使用 File 或 Blob 物件來指定要讀取的檔案或資料，從而非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容。
File 物件可以從使用者使用 <input type="file"> 元素選擇檔案後返回的 FileList 物件獲得，或者從拖放操作的 DataTransfer 物件獲得。FileReader 只能訪問使用者明確選擇的檔案內容；它不能透過檔案路徑從使用者的檔案系統中讀取檔案。要透過檔案路徑讀取客戶端的檔案系統中的檔案，請使用 檔案系統訪問 API。要讀取伺服器端檔案，請使用 fetch()，並在讀取跨域內容時需要 CORS 許可權。
建構函式
FileReader()-
返回一個新的
FileReader物件。
有關詳細資訊和示例，請參閱 使用 Web 應用程式中的檔案。
例項屬性
FileReader.error只讀-
一個
DOMException，表示讀取檔案時發生的錯誤。 FileReader.readyState只讀-
一個指示
FileReader狀態的數字。該數字是以下值之一：名稱 值 描述 EMPTY0尚未載入任何資料。 LOADING1當前正在載入資料。 DONE2整個讀取請求已完成。 FileReader.result只讀-
檔案的內容。此屬性僅在讀取操作完成後才有效，資料的格式取決於用於啟動讀取操作的方法。
例項方法
FileReader.abort()-
中止讀取操作。返回時，
readyState將為DONE。 FileReader.readAsArrayBuffer()-
開始讀取指定的
Blob的內容，完成後，result屬性將包含一個代表檔案資料的ArrayBuffer。 FileReader.readAsBinaryString()已棄用-
開始讀取指定的
Blob的內容，完成後，result屬性將包含檔案中的原始二進位制資料作為字串。 FileReader.readAsDataURL()-
開始讀取指定的
Blob的內容，完成後，result屬性將包含代表檔案資料的data:URL。 FileReader.readAsText()-
開始讀取指定的
Blob的內容，完成後，result屬性將包含檔案內容作為文字字串。可以指定一個可選的編碼名稱。
事件
使用 addEventListener() 或透過將事件監聽器分配給此介面的 oneventname 屬性來監聽這些事件。當 FileReader 不再使用時，使用 removeEventListener() 移除事件監聽器，以避免記憶體洩漏。
示例
使用 FileReader
此示例直接在瀏覽器中讀取並顯示文字檔案的內容。
HTML
<h1>File Reader</h1>
<input type="file" id="file-input" />
<div id="message"></div>
<pre id="file-content"></pre>
JavaScript
const fileInput = document.getElementById("file-input");
const fileContentDisplay = document.getElementById("file-content");
const messageDisplay = document.getElementById("message");
fileInput.addEventListener("change", handleFileSelection);
function handleFileSelection(event) {
const file = event.target.files[0];
fileContentDisplay.textContent = ""; // Clear previous file content
messageDisplay.textContent = ""; // Clear previous messages
// Validate file existence and type
if (!file) {
showMessage("No file selected. Please choose a file.", "error");
return;
}
if (!file.type.startsWith("text")) {
showMessage("Unsupported file type. Please select a text file.", "error");
return;
}
// Read the file
const reader = new FileReader();
reader.onload = () => {
fileContentDisplay.textContent = reader.result;
};
reader.onerror = () => {
showMessage("Error reading the file. Please try again.", "error");
};
reader.readAsText(file);
}
// Displays a message to the user
function showMessage(message, type) {
messageDisplay.textContent = message;
messageDisplay.style.color = type === "error" ? "red" : "green";
}
結果
規範
| 規範 |
|---|
| File API # APIASynch |
瀏覽器相容性
載入中…