С каждым годом JavaScript умеет все больше и больше. Сейчас вы можете не только выбрать файлы с компьютера и проверить их расширение с помощью регулярных выражений, но и прочитать файл, чтобы вывести его содержимое на экран или отобразить процесс загрузки.
Итак, вы можете читать обычные файлы в JavaScript с помощью объекта FileReader. Этот объект может принимать два типа объектов: File(создается автоматически, когда пользователь выбирает файл) или Blob, с помощью которых задаётся файл или данные для чтения.
Для того чтобы использовать объект FileReader, вам нужно будет создать его экземпляр: const reader = new FileReader(), а затем использовать его для отслеживания загрузки файла и отображения его содержимого.
Свойства, методы и события объекта FileReader
Свойства
Свойства объекта FileReader предназначены только для чтения.
error- представляет собой ошибку, происходящую при чтении файла.readyState- число, обозначающее состояние объектаFileReader. Принимает одно из значений State constants:FileReader.EMPTY(0) - Reader создан, но ни один из методов чтения еще не был вызван.FileReader.LOADING(1) - Был вызван метод чтения. Выполняется чтениеFileилиBlob, и пока не произошло никаких ошибок.FileReader.DONE(2) - Операция чтения завершена. Это может означать, что: весьFileилиBlobбыл прочитан в память, произошла ошибка чтения файла илиabort()был вызван и чтение было отменено.
result- данные из файла. Значение свойства действительно только когда завершится операция чтения, те. наступит событиеload. Aормат данных зависит от способа, с помощью которого процесс был вызван.
Методы объекта FileReader:
Вы можете использовать следующие методы для считывания информации из файла:
readAsDataURL()- кодирует в строку Base-64, которая функционирует как URL. Имеет смысл использовать, когда вы хотите получить данные для атрибута src для img или другого тега.readAsText()- считывает данные файла , как обычный текст, и выводит их как строку.readAsArrayBuffer()- выводитArrayBufferобъект. Этот метод подойдет для бинарных файлов.abort()– отменить операцию чтения файла.
События объекта FileReader :
loadstart- наступает, когда мы начинаем загрузку файла.progress- наступает при чтении двоичного объекта в памяти.abort- наступает, когда прерывается операция чтения.error- наступает при возникновении ошибки.load- наступает при успешном чтении файла. Это наиболее часто обрабатываемое событие, т.к. при загрузке небольших файлов процесс происходит очень быстро.loadend- наступает при загрузке файла, если не была вызвана ошибка или прерывание или если загружается новый файл.
В примере ниже вы сможете загрузить файлы разного типа и посмотреть на их содержимое в виде строки в кодировке Base-64. Этого можно добиться с использованием метода readAsDataURL().
See the Pen JS FileReader API properties and handlers by Elen (@ambassador) on CodePen.
А в примере ниже вы можете посмотреть, каким образом мы можем отобразить название загружаемого файла с помощью объекта FileReader, выбирая файл через <input type="file"> или путем его перетаскивания. Для стилизации примера был использован Bootstrap 4.
See the Pen Custom drag file upload in Bootstrap 4 by Elen (@ambassador) on CodePen.
Загрузка текстового файла
В примере ниже вы найдете, как можно загрузить информацию из обычного текстового файла в формате .txt. Его содержимое можно легко считать и вывести в любой html-элемент с помощью свойства FileReader.result.
See the Pen FileReader JS Load Text by Elen (@ambassador) on CodePen.
Кстати, html- или js-файлы вы также можете загрузить и отобразить их текстовое содержимое с помощью этого примера, т.к. по сути они являются тоже текстовыми файлами.
Загрузка файла изображения
Когда вы загружаете изображение, то получаете данные объекта Blob. Их можно считать в виде длинной строки, как мы это уже делали в первом примере, или преобразовать в изображение и показать его пользователю в виде предпросмотра. Для этого мы создаем новое пустое изображение с помощью const img = new Image(). Затем помещаем в него данные, полученные с помощью свойства result: img.src = reader.result; И добавляем изображение в элемент для предпросмотра (в примере с id="output"): output.appendChild(img);
See the Pen HTML5 FileReader API Demo: Images by Elen (@ambassador) on CodePen.
Аналогичным образом мы можем получить загрузку сразу нескольких файлов в формате JPG и PNG и отображение их в виде списка с названием и весом файла. Для загрузки нескольких файлов для <input type="file"> необходимо добавить атрибут multiple, а для ограничения разрешенных типов файлов - атрибут accept="image/png, image/jpeg" . В предыдущих примерах тип файла мы ограничивали в коде JavaScript в виде строки imageType = /image.*/ или textType = /text.*/.
See the Pen JS FileReader for multiple images by Elen (@ambassador) on CodePen.
Примеры использования объекта FileReader для загрузки файлов
Ниже вы найдете пример загрузки файла изображения с некоторыми анимационными эффектами на основе jQuery от Milomir Topic.
See the Pen Image Upload with preview by Milomir Topic (@siremilomir) on CodePen.
Загрузка изображений с прогрессом загрузки и красивой стилизацией от Ali Majid.
See the Pen Images Uploader (Drag & browse) by Ali Majid (@ir2qi) on CodePen.
Еще один пример визуальной реализации загрузчика изображений от Bastian Andre.
See the Pen Image Upload & Preview by Bastian Andre (@BastianAndre) on CodePen.
И еще одна стилизация для загрузчика изображений с перетаскиванием.
See the Pen Drag & Drop Image File by Elen (@ambassador) on CodePen.
Загрузка различных файлов (pdf, audio, video) от Igor Agapov.
See the Pen JavaScript File Reader by Igor Agapov (@harryheman) on CodePen.
