Чтение файлов в JavaScript
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Как выбирать файлы, читать метаданные и содержимое файлов, а также отслеживать ход чтения.
Кейси Баски
Пит ЛеПейдж
Томас Штайнер
Выбор файлов на локальном устройстве пользователя и взаимодействие с ними — одна из наиболее часто используемых функций Интернета. Он позволяет пользователям выбирать файлы и загружать их на сервер, например, загружать фотографии или отправлять налоговые документы и т. д. Но он также позволяет сайтам читать их и манипулировать ими без необходимости передавать данные по сети.
Современный API доступа к файловой системе
API доступа к файловой системе предоставляет простой способ чтения и записи файлов и каталогов в локальной системе пользователя. В настоящее время он доступен в большинстве браузеров на базе Chromium, таких как Chrome или Edge. Дополнительную информацию об этом см. в статье API доступа к файловой системе .
Поскольку API доступа к файловой системе пока совместим не со всеми браузерами, ознакомьтесь с браузером-fs-access , вспомогательной библиотекой, которая использует новый API везде, где он доступен, но возвращается к устаревшим подходам, когда это не так.
Работа с файлами классический способ
В этом руководстве показано, как:
- Выбрать файлы
- Использование элемента ввода HTML
- Использование зоны перетаскивания
Выбрать файлы
HTML-элемент ввода
Самый простой способ выбрать файлы — использовать элемент , который поддерживается всеми основными браузерами. При нажатии он позволяет пользователю выбрать файл или несколько файлов, если включен атрибут multiple , используя встроенный пользовательский интерфейс выбора файлов своей операционной системы. Когда пользователь завершает выбор файла или файлов, срабатывает событие change элемента. Вы можете получить доступ к списку файлов из event.target.files , который является объектом FileList . Каждый элемент в FileList является объектом File .
Примечание. Проверьте, является ли метод window.showOpenFilePicker() жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает вам дескриптор файла, поэтому вы можете, помимо чтения, выполнить обратную запись в файл. Этот метод может быть полифиллом .
В этом примере пользователь может выбрать несколько файлов с помощью встроенного пользовательского интерфейса выбора файлов своей операционной системы, а затем записать каждый выбранный файл на консоль.
Ограничьте типы файлов, которые пользователи могут выбирать
В некоторых случаях вам может потребоваться ограничить типы файлов, которые могут выбирать пользователи. Например, приложение для редактирования изображений должно принимать только изображения, а не текстовые файлы. Для этого добавьте атрибут accept к элементу ввода, чтобы указать, какие типы файлов принимаются.
Пользовательское перетаскивание
В некоторых браузерах элемент также является целью перетаскивания, позволяя пользователям перетаскивать файлы в ваше приложение. Но цель перетаскивания мала, и ее может быть сложно использовать. Вместо этого, предоставив основные функции с помощью элемента , вы можете предоставить большую настраиваемую поверхность для перетаскивания.
Примечание. Проверьте, является ли метод DataTransferItem.getAsFileSystemHandle() жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает вам дескриптор файла, поэтому вы можете, помимо чтения, выполнить обратную запись в файл.
Выберите зону высадки
Поверхность падения зависит от конструкции вашего приложения. Вы можете захотеть, чтобы только часть окна была поверхностью падения или, возможно, все окно.
Squoosh позволяет пользователю перетаскивать изображение в любое место окна, а нажатие кнопки выбора изображения вызывает элемент . Что бы вы ни выбрали в качестве зоны перетаскивания, убедитесь, что пользователю понятно, что он может перетаскивать файлы на эту поверхность.
Определите зону сброса
Чтобы сделать элемент зоной перетаскивания, вам необходимо прослушивать два события: dragover и drop . Событие dragover обновляет пользовательский интерфейс браузера, чтобы визуально указать, что действие перетаскивания создает копию файла. Событие drop запускается после того, как пользователь бросает файлы на поверхность. Как и в случае с элементом input, вы можете получить доступ к списку файлов из event.dataTransfer.files , который является объектом FileList . Каждый элемент в FileList является объектом File .
const dropArea = document.getElementById('drop-area'); dropArea.addEventListener('dragover', (event) => < event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect = 'copy'; >); dropArea.addEventListener('drop', (event) => < event.stopPropagation(); event.preventDefault(); const fileList = event.dataTransfer.files; console.log(fileList); >);event.stopPropagation() и event.preventDefault() останавливают поведение браузера по умолчанию и вместо этого позволяют запускать ваш код. Без них браузер в противном случае ушел бы с вашей страницы и открыл бы файлы, которые пользователь поместил в окно браузера.
Ознакомьтесь с функцией «Пользовательское перетаскивание» для демонстрации в реальном времени.
А что насчет каталогов?
К сожалению, сегодня не существует хорошего способа доступа к каталогу.
Атрибут webkitdirectory в элементе позволяет пользователю выбирать каталог или каталоги. Он поддерживается в большинстве основных браузеров, за исключением Firefox для Android.
Примечание. Проверьте, является ли метод window.showDirectoryPicker() жизнеспособной альтернативой для вашего варианта использования, поскольку он также дает вам дескриптор каталога, поэтому вы можете, помимо чтения, выполнять обратную запись в каталог. Этот метод может быть полифиллом .
Если перетаскивание включено, пользователь может попытаться перетащить каталог в зону перетаскивания. Когда событие drop запускается, оно включает объект File для каталога, но не обеспечивает доступ ни к одному из файлов в каталоге.
Чтение метаданных файла
Объект File содержит метаданные о файле. Большинство браузеров предоставляют имя файла, размер файла и тип MIME, хотя в зависимости от платформы разные браузеры могут предоставлять разную или дополнительную информацию.
function getMetadataForFileList(fileList) < for (const file of fileList) < // Not supported in Safari for iOS. const name = file.name ? file.name : 'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type : 'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size : 'NOT SUPPORTED'; console.log(); > >Вы можете увидеть это в действии в демо input-type-file .
Чтение содержимого файла
Чтобы прочитать файл, используйте FileReader , который позволяет вам читать содержимое объекта File в память. Вы можете указать FileReader читать файл как буфер массива , URL-адрес данных или текст .
function readImage(file) < // Check if the file is an image. if (file.type && !file.type.startsWith('image/')) < console.log('File is not an image.', file.type, file); return; >const reader = new FileReader(); reader.addEventListener('load', (event) => < img.src = event.target.result; >); reader.readAsDataURL(file); >В приведенном выше примере считывается File предоставленный пользователем, затем преобразуется его в URL-адрес данных и используется этот URL-адрес данных для отображения изображения в элементе img . Посмотрите демонстрацию read-image-file , чтобы узнать, как проверить, что пользователь выбрал файл изображения.
Следите за ходом чтения файла
При чтении больших файлов может быть полезно предоставить некоторый пользовательский интерфейс, чтобы указать, насколько далеко продвинулось чтение. Для этого используйте событие progress , предоставляемое FileReader . Событие progress предоставляет два свойства: loaded (прочитанное количество) и total (объем для чтения).
function readFile(file) < const reader = new FileReader(); reader.addEventListener('load', (event) =>< const result = event.target.result; // Do something with result >); reader.addEventListener('progress', (event) => < if (event.loaded && event.total) < const percent = (event.loaded / event.total) * 100; console.log(`Progress: $`); > >); reader.readAsDataURL(file); >Изображение героя Винсента Ботты из Unsplash
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2010-06-18 UTC.