FileSystemFileHandle
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
* Some parts of this feature may have varying levels of support.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
Giao diện FileSystemFileHandle của File System API đại diện cho một handle tới một mục nhập file. Giao diện này được truy cập thông qua phương thức window.showOpenFilePicker().
Lưu ý rằng các thao tác đọc và ghi phụ thuộc vào quyền truy cập file, và các quyền này sẽ không còn sau khi tải lại trang nếu không còn tab nào khác cho origin đó đang mở. Phương thức queryPermission của giao diện FileSystemHandle có thể được dùng để kiểm tra trạng thái quyền trước khi truy cập file.
Thuộc tính thể hiện
Kế thừa các thuộc tính từ lớp cha của nó, FileSystemHandle.
Phương thức thể hiện
Kế thừa các phương thức từ lớp cha của nó, FileSystemHandle.
getFile()-
Trả về một
Promiseđược thực thi thành một đối tượngFileđại diện cho trạng thái trên đĩa của mục nhập được handle đại diện. createSyncAccessHandle()-
Trả về một
Promiseđược thực thi thành một đối tượngFileSystemSyncAccessHandlecó thể dùng để đọc và ghi file đồng bộ. Tính đồng bộ của phương thức này mang lại lợi thế về hiệu năng, nhưng chỉ có thể dùng bên trong các Web Worker chuyên dụng cho các tệp nằm trong origin private file system. createWritable()-
Trả về một
Promiseđược thực thi thành một đối tượngFileSystemWritableFileStreammới được tạo, có thể dùng để ghi vào file.
Ví dụ
Đọc một file
Hàm bất đồng bộ sau hiển thị bộ chọn file và, sau khi người dùng chọn file, dùng phương thức getFile() để lấy nội dung.
async function getTheFile() {
const pickerOpts = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};
// mở bộ chọn file
const [fileHandle] = await window.showOpenFilePicker(pickerOpts);
// lấy nội dung file
const fileData = await fileHandle.getFile();
return fileData;
}
Ghi một file
Hàm bất đồng bộ sau ghi nội dung đã cho vào file handle, và do đó ghi ra đĩa.
async function writeFile(fileHandle, contents) {
// Tạo một FileSystemWritableFileStream để ghi vào.
const writable = await fileHandle.createWritable();
// Ghi nội dung của file vào stream.
await writable.write(contents);
// Đóng file và ghi nội dung ra đĩa.
await writable.close();
}
Đọc và ghi file đồng bộ
Hàm xử lý sự kiện bất đồng bộ sau nằm bên trong một Web Worker. Khi nhận một thông điệp từ luồng chính, nó:
- Tạo một handle truy cập file đồng bộ.
- Lấy kích thước file và tạo một
ArrayBufferđể chứa nó. - Đọc nội dung file vào bộ đệm.
- Mã hóa thông điệp và ghi nó vào cuối file.
- Lưu thay đổi xuống đĩa và đóng handle truy cập.
onmessage = async (e) => {
// Lấy thông điệp được gửi tới worker từ script chính
const message = e.data;
// Lấy handle tới file nháp
const root = await navigator.storage.getDirectory();
const draftHandle = await root.getFileHandle("draft.txt", { create: true });
// Lấy sync access handle
const accessHandle = await draftHandle.createSyncAccessHandle();
// …
// Luôn đóng FileSystemSyncAccessHandle khi xong.
accessHandle.close();
};
Note:
Ở các phiên bản trước của đặc tả, close(), flush(), getSize(), và truncate() đã được chỉ định sai là các phương thức bất đồng bộ, và các phiên bản cũ của một số trình duyệt triển khai chúng theo cách đó. Tuy nhiên, tất cả trình duyệt hiện tại hỗ trợ các phương thức này đều triển khai chúng như các phương thức đồng bộ.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| File System # api-filesystemfilehandle |