FileReader：result 屬性
注意：此功能在 Web Workers 中可用。
FileReader 介面的只讀屬性 result 返回檔案的內容。此屬性僅在讀取操作完成後才有效，資料格式取決於用於啟動讀取操作的方法。
值
根據用於啟動讀取操作的讀取方法，返回一個合適的字串或 ArrayBuffer。如果讀取尚未完成或不成功，則值為 null。
結果型別描述如下。
| 方法 | 描述 |
|---|---|
readAsArrayBuffer()
|
result 是一個包含二進位制資料的 JavaScript ArrayBuffer。 |
readAsBinaryString()
|
result 在字串中包含來自檔案的原始二進位制資料。 |
readAsDataURL()
|
result 是一個包含表示檔案資料的 data: URL 的字串。 |
readAsText()
|
result 是字串形式的文字。 |
示例
此示例演示了一個函式 reader()，該函式從 檔案輸入中讀取檔案。它透過建立一個 FileReader 物件並建立一個 load 事件的監聽器來實現，以便在檔案讀取完成後，獲取 result 並將其傳遞給提供給 reader() 的回撥函式。
內容被作為原始文字資料處理。
js
// Given this HTMLInputElement of type="file":
// <input id="image" type="file" accept="image/*">
function reader(file, callback) {
const fr = new FileReader();
fr.onload = () => callback(null, fr.result);
fr.onerror = (err) => callback(err);
fr.readAsDataURL(file);
}
document.querySelector("#image").addEventListener("change", (evt) => {
// No files, do nothing.
if (!evt.target.files) {
return;
}
reader(evt.target.files[0], (err, res) => {
console.log(res); // Base64 `data:image/...` String result.
});
});
鑑於 FileReader 的非同步性質，您可以使用基於 Promise 的方法。以下是一個用於帶有 multiple 屬性的 檔案輸入 的示例，它返回一個 Promise。
js
// Given this HTMLInputElement:
// <input id="images" type="file" accept="image/*" multiple>
const reader = (file) =>
new Promise((resolve, reject) => {
const fr = new FileReader();
fr.onload = () => resolve(fr);
fr.onerror = (err) => reject(err);
fr.readAsDataURL(file);
});
async function logImagesData(fileList) {
let fileResults = [];
const frPromises = fileList.map(reader);
try {
fileResults = await Promise.all(frPromises);
} catch (err) {
// In this specific case, Promise.all() might be preferred
// over Promise.allSettled(), since it isn't trivial to modify
// a FileList to a subset of files of what the user initially
// selected. Therefore, let's just stash the entire operation.
console.error(err);
return;
}
fileResults.forEach((fr) => {
console.log(fr.result); // Base64 `data:image/...` String result.
});
}
// HTMLInputElement type="file" Event handler:
document.querySelector("#images").addEventListener("change", (evt) => {
// If no files, do nothing.
if (!evt.target.files) {
return;
}
logImagesData([...evt.target.files]);
});
規範
| 規範 |
|---|
| File API # dom-filereader-result |
瀏覽器相容性
載入中…