File API

Khái niệm và cách sử dụng

File API cho phép các ứng dụng web truy cập tệp và nội dung của chúng.

Các ứng dụng web có thể truy cập tệp khi người dùng cung cấp chúng, sử dụng phần tử <input> kiểu file hoặc qua kéo và thả.

Các tập hợp tệp được cung cấp theo cách này được đại diện bởi các đối tượng FileList, cho phép ứng dụng web lấy các đối tượng File riêng lẻ. Các đối tượng File cung cấp quyền truy cập vào siêu dữ liệu như tên, kích thước, loại và ngày sửa đổi cuối cùng của tệp.

Các đối tượng File có thể được truyền vào các đối tượng FileReader để truy cập nội dung tệp. Giao diện FileReader là không đồng bộ, nhưng phiên bản đồng bộ, chỉ có sẵn trong web workers, được cung cấp bởi giao diện FileReaderSync.

Mối quan hệ với các API liên quan đến tệp khác

Có hai API lớn khác cũng xử lý tệp: File and Directory Entries API và File System API.

File API là cơ bản nhất. Nó hỗ trợ đọc và xử lý dữ liệu tệp được cung cấp rõ ràng bởi người dùng dưới dạng đầu vào phần tử form hoặc thao tác kéo và thả. Nó cũng cho phép xử lý dữ liệu nhị phân qua blob.

File and Directory Entries API, giống như File API, cũng xử lý các tệp được người dùng cung cấp qua đầu vào form hoặc thao tác kéo và thả. Tuy nhiên, thay vì một tệp, phần tử đầu vào bây giờ cho phép chọn thư mục hoặc nhiều tệp. API sau đó cung cấp cách xử lý thư mục hoặc tệp. Đây phần lớn là sáng tạo của riêng Chrome, bạn sẽ thấy các phần mở rộng của nó cho các giao diện khác đều có tiền tố webkit. File and Directory Entries API có câu chuyện đầy đủ hơn về quá trình triển khai và chuẩn hóa. Ban đầu nó được dự định để hỗ trợ hệ thống tệp ảo đầy đủ, nhưng bây giờ chỉ hỗ trợ các thao tác đọc trên dữ liệu do người dùng cung cấp.

File System API cung cấp hệ thống tệp ảo cho các ứng dụng web, để chúng có thể lưu trữ dữ liệu liên tục trong hệ thống ảo riêng tư với nguồn gốc của tài liệu (được gọi là Hệ thống tệp riêng tư nguồn gốc (OPFS)). File System Access API mở rộng thêm File System API để cho phép các trang web đọc và ghi tệp người dùng, phụ thuộc vào sự đồng ý của người dùng. Khác với File API và File and Directory Entries API, File System API là thuần JavaScript và không xử lý đầu vào form.

Giao diện

Blob

Đại diện cho "Binary Large Object", có nghĩa là đối tượng giống tệp gồm dữ liệu thô, bất biến; Blob có thể được đọc dưới dạng văn bản hoặc dữ liệu nhị phân, hoặc chuyển đổi thành ReadableStream để các phương thức của nó có thể được sử dụng để xử lý dữ liệu.

File

Cung cấp thông tin về tệp và cho phép JavaScript trong trang web truy cập nội dung của nó.

FileList

Được trả về bởi thuộc tính files của phần tử HTML <input>; điều này cho phép bạn truy cập danh sách tệp được chọn với phần tử <input type="file">. Nó cũng được sử dụng cho danh sách tệp được thả vào nội dung web khi sử dụng drag and drop API; xem đối tượng DataTransfer để biết chi tiết về cách sử dụng này.

FileReader

Cho phép các ứng dụng web đọc không đồng bộ nội dung tệp (hoặc bộ đệm dữ liệu thô) được lưu trữ trên máy tính của người dùng, sử dụng các đối tượng File hoặc Blob để chỉ định tệp hoặc dữ liệu cần đọc.

FileReaderSync

Cho phép các ứng dụng web đọc đồng bộ nội dung tệp (hoặc bộ đệm dữ liệu thô) được lưu trữ trên máy tính của người dùng, sử dụng các đối tượng File hoặc Blob để chỉ định tệp hoặc dữ liệu cần đọc.

Phần mở rộng cho các giao diện khác

URL.createObjectURL()

Tạo URL có thể được sử dụng để tải đối tượng File hoặc Blob.

URL.revokeObjectURL()

Giải phóng URL đối tượng hiện có đã được tạo trước đó bằng cách gọi URL.createObjectURL().

Ví dụ

Đọc tệp

Trong ví dụ này, chúng tôi cung cấp một phần tử <input> kiểu file, và khi người dùng chọn tệp, chúng tôi đọc nội dung tệp đầu tiên được chọn dưới dạng văn bản và hiển thị kết quả trong <div>.

HTML

<input type="file" />
<div class="output"></div>

CSS

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

const fileInput = document.querySelector("input[type=file]");
const output = document.querySelector(".output");

fileInput.addEventListener("change", async () => {
  const [file] = fileInput.files;

  if (file) {
    output.innerText = await file.text();
  }
});

Kết quả

Thông số kỹ thuật

Xem thêm

• <input type="file">: phần tử đầu vào tệp
• Blob.text()
• Giao diện DataTransfer