Примеры использования API файла html5 для чтения локальных файлов (например, изображений, PDF и т. д.)

В эпоху HTML4, если мы хотим представить локальное изображение пользователя на веб-странице, пользователю необходимо сначала загрузить изображение на сервер, а затем загрузить изображение по адресу изображения, предоставленному сервером, прежде чем изображение сможет отображаться на веб-странице. Это туда-сюда стоило как минимум вдвое больше трафика, чем эта картинка, не говоря уже о ресурсах, затраченных сервером на хранение этой картинки, и несправедливых затратах, связанных с загрузкой пользователем неправильной картинки (потому что в эпоху HTML4 пользователи выбирают После загрузки изображения, вы часто можете видеть только имя файла изображения, но не можете дополнительно подтвердить, является ли изображение тем, которое вы хотите загрузить, путем его предварительного просмотра).

HTML5 предоставляет новый способ игры. С помощью только браузера вы можете визуализировать, читать и обрабатывать локальные (на самом деле они также могут быть удаленными) файлы (в основном изображения), и все это делается через файловый API HTML5. достигать.

Первый — это структура данных. HTML5 определяет тип файлового объекта для представления файлов, и каждый файловый объект соответствует файлу. Объект файла имеет три атрибута: имя, размер и тип. name — это имя файла без пути, size — это размер файла в байтах, а type — это MIME файла (например, image/jpg).

Файловый объект существует не один, а в виде массива, в массиве с именем FileList. Итак, как получить этот массив FileList? В настоящее время в HTML5 есть два способа получить FileList: один — через ввод типа файла, а другой — через событие drop в операции перетаскивания.

Получить FileList путем ввода типа файла

 <input id=file-input type=file />

Или новый атрибут Multiple в HTML5, который позволяет выбирать несколько файлов:

 <input id=тип ввода-файла=несколько файлов />

Обычно мы прикрепляем событие onchange к input:file, чтобы после того, как пользователь выберет файл, следующие шаги, такие как чтение файла, могли быть выполнены немедленно:

 // Собственный jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handleFiles, false);function handleFiles() { var fileList = this.files;//jquery version$('#file-input ').on('change', function() { var fileList = this.files;});

Сначала установите область для перетаскивания:

 <div id=dropbox style=width: 200px;height: 200px;></div>

Кроме того, чтобы вызвать событие перетаскивания, мы должны предотвратить поведение по умолчанию событий перетаскивания и перетаскивания:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(drop, drop, false); функция dragenter(e) { e.stopPropagation(); e.preventDefault();}перетаскивание функции(e) { е.stopPropagation(); е.preventDefault();}

Затем мы можем получить список файлов в обратном вызове события drop:

 функция drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; handleFiles(files);}

HTML5 предоставляет два решения: FileReader и ObjectUrl.

Сначала вам нужно создать экземпляр объекта FileReader:

 вар читатель = новый FileReader ();

Использование FileReader для чтения файловых объектов — это асинхронный процесс. Нам нужно сначала установить обратный вызов события загрузки для FileReader, чтобы сообщить FileReader, какие дальнейшие операции он должен выполнить после чтения данных файлового объекта:

 reader.onload = function(e) { document.getElementById(image).src = e.target.result };

Смысл приведенного выше кода заключается в том, что после того, как FileReader прочитает данные изображения, он помещает данные (DataUrl) в атрибут src.

Наконец, различные методы FileReader используются для принятия решения о том, какой формат данных использовать для хранения данных файлового объекта после их чтения, и реализации чтения:

1. readAsArrayBuffer(file): прочитайте объект файла и сохраните его как объект ArrayBuffer (я еще не понял, что такое объект ArrayBuffer, это должна быть структура данных, созданная для эффективного доступа к данным).
2. readAsText(file [, 'UTF-8']): чтение объекта файла в обычном текстовом режиме. Стоит отметить, что второй параметр (необязательный) можно использовать для указания кодировки символов.
3. readAsDataURL(file): прочитайте объект файла и сохраните его как строку в формате data: URL.

ObjectURL эквивалентен временному пути к файлу. Этот временный путь можно создать и освободить в любое время. При использовании в локальном браузере он ничем не отличается от обычного URL-адреса.

В качестве примера возьмем отображение локального изображения на странице:

 вар img = document.createElement(img);img.src = window.URL.createObjectURL(файл);

В настоящее время src выглядит так: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40.

Использование этого источника позволяет браузеру читать изображения локально.

По сравнению с использованием FileReader для генерации изображения в кодировке Base64 и помещения его в src, производительность этого решения значительно улучшилась.

Сравнивая эти два решения для чтения объектов File, FileReader подходит для загрузки файлов, а ObjectURL подходит для работы непосредственно в браузере, а затем загрузки обработанных данных после операции, например, использования холста для создания снимков экрана или выполнения сжатия изображений и т. д. . Конечно, все зависит от совместимости.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.