FileReader

Hàm khởi tạo

FileReader()

Trả về một đối tượng FileReader mới.

Xem Sử dụng tệp từ ứng dụng web để biết chi tiết và ví dụ.

Thuộc tính phiên bản

FileReader.error Read only

Một DOMException đại diện cho lỗi xảy ra khi đọc tệp.

FileReader.readyState Read only

Một số chỉ trạng thái của FileReader. Giá trị là một trong các trạng thái sau:

Tên	Giá trị	Mô tả
EMPTY	0	Chưa có dữ liệu nào được tải.
LOADING	1	Dữ liệu đang được tải.
DONE	2	Toàn bộ yêu cầu đọc đã hoàn thành.

FileReader.result Read only

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.

Phương thức phiên bản

FileReader.abort()

Huỷ thao tác đọc. Sau khi trả về, readyState sẽ là DONE.

FileReader.readAsArrayBuffer()

Bắt đầu đọc nội dung của Blob được chỉ định; khi hoàn tất, thuộc tính result chứa một ArrayBuffer đại diện cho dữ liệu tệp.

FileReader.readAsBinaryString() Đã lỗi thời

Bắt đầu đọc nội dung của Blob được chỉ định; khi hoàn tất, thuộc tính result chứa dữ liệu nhị phân thô từ tệp dưới dạng chuỗi.

FileReader.readAsDataURL()

Bắt đầu đọc nội dung của Blob được chỉ định; khi hoàn tất, thuộc tính result chứa một URL data: đại diện cho dữ liệu tệp.

FileReader.readAsText()

Bắt đầu đọc nội dung của Blob được chỉ định; khi hoàn tất, thuộc tính result chứa nội dung tệp dưới dạng chuỗi văn bản. Có thể chỉ định tên mã hóa tùy chọn.

Sự kiện

Lắng nghe các sự kiện này bằng cách dùng addEventListener() hoặc gán trình xử lý sự kiện vào thuộc tính oneventname của giao diện này. Xóa trình xử lý sự kiện bằng removeEventListener() khi FileReader không còn được dùng nữa để tránh rò rỉ bộ nhớ.

abort

Kích hoạt khi thao tác đọc bị huỷ, chẳng hạn khi chương trình gọi FileReader.abort().

error

Kích hoạt khi thao tác đọc thất bại do lỗi.

load

Kích hoạt khi thao tác đọc hoàn tất thành công.

loadend

Kích hoạt khi thao tác đọc hoàn tất, dù thành công hay không.

loadstart

Kích hoạt khi thao tác đọc bắt đầu.

progress

Kích hoạt định kỳ khi dữ liệu đang được đọc.

Ví dụ

Sử dụng FileReader

Ví dụ này đọc và hiển thị nội dung của một tệp văn bản trực tiếp trên trình duyệt.

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 = ""; // Xóa nội dung tệp trước đó
  messageDisplay.textContent = ""; // Xóa thông báo trước đó

  // Kiểm tra sự tồn tại và loại tệp
  if (!file) {
    showMessage("Chưa chọn tệp. Vui lòng chọn một tệp.", "error");
    return;
  }

  if (!file.type.startsWith("text")) {
    showMessage(
      "Loại tệp không được hỗ trợ. Vui lòng chọn tệp văn bản.",
      "error",
    );
    return;
  }

  // Đọc tệp
  const reader = new FileReader();
  reader.onload = () => {
    fileContentDisplay.textContent = reader.result;
  };
  reader.onerror = () => {
    showMessage("Lỗi khi đọc tệp. Vui lòng thử lại.", "error");
  };
  reader.readAsText(file);
}

// Hiển thị thông báo cho người dùng
function showMessage(message, type) {
  messageDisplay.textContent = message;
  messageDisplay.style.color = type === "error" ? "red" : "green";
}

Kết quả

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Sử dụng tệp từ ứng dụng web
• File
• Blob
• FileReaderSync