FileReader: phương thức readAsDataURL()
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.
Phương thức readAsDataURL() của giao diện FileReader được dùng để đọc nội dung của Blob hoặc File được chỉ định. Khi thao tác đọc hoàn tất, thuộc tính readyState trở thành DONE và sự kiện loadend được kích hoạt. Lúc đó, thuộc tính result chứa dữ liệu dưới dạng URL data: đại diện cho dữ liệu tệp được mã hóa base64.
Note:
Kết quả blob's result không thể được giải mã trực tiếp dưới dạng Base64 mà không cần xóa phần khai báo Data-URL đứng trước dữ liệu mã hóa Base64. Để chỉ lấy chuỗi Base64, trước tiên cần xóa data:*/*;base64, khỏi kết quả.
Cú pháp
readAsDataURL(blob)
Tham số
Giá trị trả về
Không có (undefined).
Ví dụ
Đọc một tệp đơn
HTML
<input type="file" /><br />
<img src="" height="200" alt="Image preview" />
JavaScript
const preview = document.querySelector("img");
const fileInput = document.querySelector("input[type=file]");
fileInput.addEventListener("change", previewFile);
function previewFile() {
const file = fileInput.files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
// chuyển tệp hình ảnh sang chuỗi base64
preview.src = reader.result;
});
if (file) {
reader.readAsDataURL(file);
}
}
Kết quả
Đọc nhiều tệp
HTML
<input id="browse" type="file" multiple />
<div id="preview"></div>
JavaScript
function previewFiles() {
const preview = document.querySelector("#preview");
const files = document.querySelector("input[type=file]").files;
function readAndPreview(file) {
// Đảm bảo `file.name` khớp với tiêu chí phần mở rộng
if (/\.(?:jpe?g|png|gif)$/i.test(file.name)) {
const reader = new FileReader();
reader.addEventListener("load", () => {
const image = new Image();
image.height = 100;
image.title = file.name;
image.src = reader.result;
preview.appendChild(image);
});
reader.readAsDataURL(file);
}
}
if (files) {
Array.prototype.forEach.call(files, readAndPreview);
}
}
const picker = document.querySelector("#browse");
picker.addEventListener("change", previewFiles);
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| File API # readAsDataURL |