FileReader: thuộc tính result
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
Thuộc tính chỉ đọc result của giao diện FileReader trả về nội dung của tệp. Thuộc tính này chỉ hợp lệ sau khi thao tác đọc hoàn tất, và định dạng dữ liệu phụ thuộc vào phương thức nào được dùng để khởi tạo thao tác đọc.
Giá trị
Chuỗi hoặc ArrayBuffer phù hợp dựa trên phương thức đọc nào được dùng để khởi tạo thao tác đọc. Giá trị là null nếu việc đọc chưa hoàn tất hoặc không thành công.
Các loại kết quả được mô tả bên dưới.
| Phương thức | Mô tả |
|---|---|
readAsArrayBuffer()
|
result là một
ArrayBuffer JavaScript
chứa dữ liệu nhị phân.
|
readAsBinaryString()
|
result chứa dữ liệu nhị phân thô từ tệp trong một
chuỗi.
|
readAsDataURL()
|
result là một chuỗi với URL data:
đại diện cho dữ liệu tệp.
|
readAsText()
|
result là văn bản trong một chuỗi. |
Ví dụ
Ví dụ này trình bày hàm reader() đọc một tệp từ đầu vào tệp. Hàm này hoạt động bằng cách tạo đối tượng FileReader và tạo trình lắng nghe cho sự kiện load, sao cho khi tệp được đọc, result được lấy và truyền vào hàm gọi lại được cung cấp cho reader().
Nội dung được xử lý như dữ liệu văn bản thô.
// Với HTMLInputElement này có 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) => {
// Không có tệp, không làm gì.
if (!evt.target.files) {
return;
}
reader(evt.target.files[0], (err, res) => {
console.log(res); // Chuỗi Base64 `data:image/...`.
});
});
Do tính bất đồng bộ của FileReader, bạn có thể dùng cách tiếp cận dựa trên Promise. Đây là ví dụ với đầu vào tệp có thuộc tính multiple trả về một Promise.
// Với HTMLInputElement này:
// <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) {
// Trong trường hợp này, Promise.all() có thể được ưa thích hơn
// Promise.allSettled(), vì không dễ để sửa đổi
// FileList thành tập con tệp mà người dùng ban đầu đã chọn.
// Do đó, hãy bỏ qua toàn bộ thao tác.
console.error(err);
return;
}
fileResults.forEach((fr) => {
console.log(fr.result); // Chuỗi Base64 `data:image/...`.
});
}
// Trình xử lý sự kiện HTMLInputElement type="file":
document.querySelector("#images").addEventListener("change", (evt) => {
// Không có tệp, không làm gì.
if (!evt.target.files) {
return;
}
logImagesData([...evt.target.files]);
});
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| File API # dom-filereader-result |