Как работать с локальной файловой системой в JavaScript
Работа с файлами — одна из типичных задач при создании веб-приложений. Однако, доступ к локальной файловой системе пользователя с помощью JavaScript ограничен по соображениям безопасности. Современные браузеры, тем не менее, предоставляют возможности для взаимодействия с файлами через File API и File System Access API. Эти интерфейсы позволяют читать и сохранять файлы, не передавая их на сервер.
Основные подходы
В JavaScript существует два основных способа взаимодействия с локальной файловой системой:
- File API — позволяет работать с файлами, выбранными пользователем через
<input type="file">. - File System Access API — предоставляет более глубокий доступ к файловой системе: чтение, запись и создание файлов и папок (поддерживается не во всех браузерах).
File API: чтение загруженных файлов
Классический способ работы с файлами предполагает использование элемента формы:
<input type="file" id="fileInput">
<pre id="output"></pre>
<script>
document.getElementById('fileInput').addEventListener('change', function (event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function () {
document.getElementById('output').textContent = reader.result;
};
reader.readAsText(file);
});
</script>
Этот метод подходит для:
— Загрузки и анализа текстовых и бинарных файлов
— Парсинга данных, например, CSV или JSON
— Отображения содержимого файлов на клиентской стороне
File System Access API: прямой доступ к файловой системе
Этот API позволяет:
— Выбирать и открывать файлы и папки
— Читать содержимое файлов
— Записывать данные в существующие или новые файлы
Пример чтения содержимого файла:
async function openFile() {
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const content = await file.text();
console.log(content);
}
Пример записи в файл:
async function saveFile() {
const options = {
suggestedName: 'example.txt',
types: [{
description: 'Text Files',
accept: { 'text/plain': ['.txt'] }
}]
};
const handle = await window.showSaveFilePicker(options);
const writable = await handle.createWritable();
await writable.write('Текст, записанный с помощью JavaScript');
await writable.close();
}
Пример работы с папками:
async function openFolder() {
const dirHandle = await window.showDirectoryPicker();
for await (const [name, handle] of dirHandle.entries()) {
console.log(`${handle.kind}: ${name}`);
}
}
Ограничения и безопасность
Проверка доступности API:
if ('showOpenFilePicker' in window) {
// File System Access API поддерживается
}
Когда использовать File API, а когда File System Access API
| Задача | API |
|—|—|
| Чтение пользовательских файлов | File API |
| Запись в файлы, создание новых файлов | File System Access API |
| Работа с папками | File System Access API |
| Поддержка всеми браузерами | File API |
Современные возможности JavaScript позволяют организовать работу с локальными файлами без использования сервера. Это особенно полезно в офлайн-приложениях, редакторах и инструментах для работы с данными. Однако при разработке следует учитывать уровень поддержки браузерами и всегда ориентироваться на безопасность пользователя.
Если требуется реализация конкретного сценария или создание демо-приложения с использованием описанных API, я готов помочь.
