FileReader: phương thức readAsText()

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 readAsText() 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 thay đổi thành DONE, sự kiện loadend được kích hoạt, và thuộc tính result chứa nội dung tệp dưới dạng chuỗi văn bản.

Note: Phương thức Blob.text() là một API mới hơn dựa trên Promise để đọc tệp dưới dạng văn bản.

Note: Phương thức này tải toàn bộ nội dung tệp vào bộ nhớ và không phù hợp với các tệp lớn. Nên dùng readAsArrayBuffer() cho các tệp lớn.

Cú pháp

readAsText(blob)
readAsText(blob, encoding)

Tham số

blob: Blob hoặc File cần đọc.
encoding Optional: Chuỗi chỉ định mã hóa dùng cho dữ liệu trả về. Mặc định là UTF-8 nếu tham số này không được chỉ định.

<input type="file" /><br />
<p class="content"></p>

JavaScript

const content = document.querySelector(".content");
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", () => {
    // hiển thị nội dung tệp văn bản
    content.innerText = reader.result;
  });

  if (file) {
    reader.readAsText(file);
  }
}