Việc xử lý các thư mục không phải là việc bạn phải xử lý hằng ngày, nhưng đôi khi, có một trường hợp sử dụng phát sinh, chẳng hạn như khi bạn muốn xử lý tất cả hình ảnh trong một thư mục. Nhờ API Truy cập hệ thống tệp, người dùng hiện có thể mở các thư mục trong trình duyệt và quyết định xem họ có cần quyền ghi hay không.
Phong cách hiện đại
Sử dụng phương thức showDirectoryPicker() của API Truy cập hệ thống tệp
Để mở một thư mục, hãy gọi
showDirectoryPicker().
Lệnh này sẽ trả về lời hứa cùng với thư mục đã chọn. Nếu cần quyền ghi, bạn có thể chuyển { mode: 'readwrite' } vào phương thức này.
Cách cổ điển
Sử dụng phần tử <input type="file" webkitdirectory>
Phần tử <input type="file" webkitdirectory> trên trang cho phép người dùng nhấp vào phần tử đó và mở một thư mục. Thủ thuật hiện bao gồm chèn phần tử không hiển thị vào trang bằng JavaScript và nhấp vào phần tử theo lập trình.
Nâng cao dần dần
Phương thức bên dưới sử dụng API Truy cập hệ thống tệp khi được hỗ trợ, ngoài ra sẽ quay lại phương pháp cũ. Trong cả hai trường hợp, hàm trả về một thư mục, nhưng trong trường hợp API Truy cập hệ thống tệp được hỗ trợ, mỗi đối tượng tệp cũng có một FileSystemDirectoryHandle được lưu trữ trong thuộc tính directoryHandle và một FileSystemFileHandle được lưu trữ trong thuộc tính handle, nên bạn có thể tuỳ ý chuyển đổi tuần tự các ô điều khiển vào ổ đĩa.
const openDirectory = async (mode = "read") => {
// Feature detection. The API needs to be supported
// and the app not run in an iframe.
const supportsFileSystemAccess =
"showDirectoryPicker" in window &&
(() => {
try {
return window.self === window.top;
} catch {
return false;
}
})();
// If the File System Access API is supported…
if (supportsFileSystemAccess) {
let directoryStructure = undefined;
// Recursive function that walks the directory structure.
const getFiles = async (dirHandle, path = dirHandle.name) => {
const dirs = [];
const files = [];
for await (const entry of dirHandle.values()) {
const nestedPath = `${path}/${entry.name}`;
if (entry.kind === "file") {
files.push(
entry.getFile().then((file) => {
file.directoryHandle = dirHandle;
file.handle = entry;
return Object.defineProperty(file, "webkitRelativePath", {
configurable: true,
enumerable: true,
get: () => nestedPath,
});
})
);
} else if (entry.kind === "directory") {
dirs.push(getFiles(entry, nestedPath));
}
}
return [
...(await Promise.all(dirs)).flat(),
...(await Promise.all(files)),
];
};
try {
// Open the directory.
const handle = await showDirectoryPicker({
mode,
});
// Get the directory structure.
directoryStructure = getFiles(handle, undefined);
} catch (err) {
if (err.name !== "AbortError") {
console.error(err.name, err.message);
}
}
return directoryStructure;
}
// Fallback if the File System Access API is not supported.
return new Promise((resolve) => {
const input = document.createElement('input');
input.type = 'file';
input.webkitdirectory = true;
input.addEventListener('change', () => {
let files = Array.from(input.files);
resolve(files);
});
if ('showPicker' in HTMLInputElement.prototype) {
input.showPicker();
} else {
input.click();
}
});
};
Tài liệu đọc thêm
Bản minh họa
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>"
/>
<title>How to open a directory</title>
</head>
<body>
<h1>How to open a directory</h1>
<button type="button">Open directory</button>
<pre></pre>
</body>
</html>CSS
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
JS
const button = document.querySelector('button');
const pre = document.querySelector('pre');
const openDirectory = async (mode = "read") => {
// Feature detection. The API needs to be supported
// and the app not run in an iframe.
const supportsFileSystemAccess =
"showDirectoryPicker" in window &&
(() => {
try {
return window.self === window.top;
} catch {
return false;
}
})();
// If the File System Access API is supported…
if (supportsFileSystemAccess) {
let directoryStructure = undefined;
const getFiles = async (dirHandle, path = dirHandle.name) => {
const dirs = [];
const files = [];
for await (const entry of dirHandle.values()) {
const nestedPath = `${path}/${entry.name}`;
if (entry.kind === "file") {
files.push(
entry.getFile().then((file) => {
file.directoryHandle = dirHandle;
file.handle = entry;
return Object.defineProperty(file, "webkitRelativePath", {
configurable: true,
enumerable: true,
get: () => nestedPath,
});
})
);
} else if (entry.kind === "directory") {
dirs.push(getFiles(entry, nestedPath));
}
}
return [
...(await Promise.all(dirs)).flat(),
...(await Promise.all(files)),
];
};
try {
const handle = await showDirectoryPicker({
mode,
});
directoryStructure = getFiles(handle, undefined);
} catch (err) {
if (err.name !== "AbortError") {
console.error(err.name, err.message);
}
}
return directoryStructure;
}
// Fallback if the File System Access API is not supported.
return new Promise((resolve) => {
const input = document.createElement('input');
input.type = 'file';
input.webkitdirectory = true;
input.addEventListener('change', () => {
let files = Array.from(input.files);
resolve(files);
});
if ('showPicker' in HTMLInputElement.prototype) {
input.showPicker();
} else {
input.click();
}
});
};
button.addEventListener('click', async () => {
const filesInDirectory = await openDirectory();
if (!filesInDirectory) {
return;
}
Array.from(filesInDirectory).forEach((file) => (pre.textContent += `${file.name}\n`));
});