- Вступление
- Выбор файлов
- Использование ввода формы для выбора
- Использование перетаскивания для выбора
- Чтение файлов
- Нарезка файла
- Отслеживание прогресса чтения
Вступление
Наконец, HTML5 предоставляет стандартный способ взаимодействия с локальными файлами через Файловый API Спецификация. В качестве примера своих возможностей, File API можно использовать для создания миниатюр предварительного просмотра изображений при их отправке на сервер или для того, чтобы приложение могло сохранить ссылку на файл, пока пользователь не в сети. Кроме того, вы можете использовать клиентскую логику, чтобы убедиться, что mimetype для загрузки соответствует его расширению или ограничить размер загрузки.
Спецификация предоставляет несколько интерфейсов для доступа к файлам из «локальной» файловой системы:
- Файл - отдельный файл; предоставляет информацию только для чтения, такую как имя, размер файла, mimetype и ссылку на дескриптор файла.
- FileList - массивоподобная последовательность объектов File. (Подумайте, <input type = "file" множественный> или перетаскивая каталог файлов с рабочего стола).
- Blob - позволяет разбивать файл на байтовые диапазоны.
При использовании в сочетании с вышеуказанными структурами данных, FileReader Интерфейс может использоваться для асинхронного чтения файла с помощью привычной обработки событий JavaScript. Таким образом, можно отслеживать ход чтения, отлавливать ошибки и определять, когда загрузка завершена. Во многих отношениях API напоминают модель событий XMLHttpRequest.
Выбор файлов
Первое, что нужно сделать, это убедиться, что ваш браузер полностью поддерживает File API:
// Проверка поддержки различных API файлов. if (window.File && window.FileReader && window.FileList && window.Blob) {// Большой успех! Все файловые API поддерживаются. } else {alert ('Файловые API не полностью поддерживаются в этом браузере.'); }Конечно, если ваше приложение будет использовать только несколько из этих API, измените этот фрагмент соответствующим образом.
Использование ввода формы для выбора
Самый простой способ загрузить файл - использовать стандартный элемент <input type = "file">. JavaScript возвращает список выбранных объектов File в виде FileList. Вот пример, который использует атрибут «несколько», чтобы позволить выбрать несколько файлов одновременно:
<input type = "file" id = "files" name = "files []" множественный /> <output id = "list"> </ output> <script> функция handleFileSelect (evt) {var files = evt.target. файлы; // FileList object // files - это FileList объектов File. Перечислите некоторые свойства. var output = []; for (var i = 0, f; f = files [i]; i ++) {output.push ('<li> <strong>', escape (f.name), '</ strong> (', f.type) || 'n / a', ') -', f.size, 'байты, последнее изменение:', f.lastModifiedDate? f.lastModifiedDate.toLocaleDateString (): 'n / a', '</ li>') ; } document.getElementById ('list'). innerHTML = '<ul>' + output.join ('') + '</ ul>'; } document.getElementById ('files'). addEventListener ('change', handleFileSelect, false); </ Скрипт>Пример : использование формы ввода для выбора. Попытайся!
Использование перетаскивания для выбора
Другой способ загрузки файлов - это встроенное перетаскивание с рабочего стола в браузер. Мы можем немного изменить предыдущий пример, чтобы включить поддержку перетаскивания.
<div id = "drop_zone"> Перетащите файлы сюда </ div> <output id = "list"> </ output> <script> function handleFileSelect (evt) {evt.stopPropagation (); evt.preventDefault (); var files = evt.dataTransfer.files; // FileList объект. // файлы - это FileList объектов File. Перечислите некоторые свойства. var output = []; for (var i = 0, f; f = files [i]; i ++) {output.push ('<li> <strong>', escape (f.name), '</ strong> (', f.type) || 'n / a', ') -', f.size, 'байты, последнее изменение:', f.lastModifiedDate? f.lastModifiedDate.toLocaleDateString (): 'n / a', '</ li>') ; } document.getElementById ('list'). innerHTML = '<ul>' + output.join ('') + '</ ul>'; } function handleDragOver (evt) {evt.stopPropagation (); evt.preventDefault (); evt.dataTransfer.dropEffect = 'copy'; // Явно показываю, что это копия. } // Настройка слушателей dnd. var dropZone = document.getElementById ('drop_zone'); dropZone.addEventListener ('dragover', handleDragOver, false); dropZone.addEventListener ('drop', handleFileSelect, false); </ Скрипт>Пример : использование перетаскивания для выбора. Попытайся!
Примечание. Некоторые браузеры обрабатывают элементы <input type = "file"> как собственные цели удаления. Попробуйте перетащить файлы в поле ввода в предыдущем примере.
Чтение файлов
Теперь самое интересное!
После получения ссылки на файл создайте экземпляр FileReader объект для чтения его содержимого в память. Когда загрузка заканчивается, запускается событие чтения читателя, и его атрибут результата может использоваться для доступа к данным файла.
FileReader включает четыре варианта асинхронного чтения файла:
- FileReader.readAsBinaryString (Blob | File) - Свойство результата будет содержать данные файла / блоба в виде двоичной строки. Каждый байт представлен целым числом в диапазоне [0..255].
- FileReader.readAsText (Blob | File, opt_encoding) - свойство результата будет содержать данные файла / блоба в виде текстовой строки. По умолчанию строка декодируется как 'UTF-8'. Использовать необязательный параметр кодирования можно указать другой формат.
- FileReader.readAsDataURL (Blob | File) - свойство результата будет содержать данные файла / блоба, закодированные как URL данных ,
- FileReader.readAsArrayBuffer (Blob | File) - свойство результата будет содержать данные файла / блоба как ArrayBuffer объект.
Как только один из этих методов чтения вызывается для вашего объекта FileReader, onloadstart, onprogress, onload, onabort, onerror и onloadend можно использовать для отслеживания его прогресса.
В приведенном ниже примере отфильтровываются изображения по выбору пользователя, вызывается метод reader.readAsDataURL () для файла и отображается миниатюра путем установки атрибута 'src' для URL-адреса данных.
<style> .thumb {height: 75px; граница: 1px solid # 000; поле: 10px 5px 0 0; } </ style> <input type = "file" id = "files" name = "files []" множественный /> <output id = "list"> </ output> <script> функция handleFileSelect (evt) {var files = evt.target.files; // FileList object // Циклически перебираем FileList и отображаем файлы изображений в виде миниатюр. for (var i = 0, f; f = files [i]; i ++) {// Обрабатывать только файлы изображений. if (! f.type.match ('image. *')) {продолжение; } var reader = new FileReader (); // Закрытие для захвата файла информации. reader.onload = (function (theFile) {return function (e) {// Отрисовка эскиза. var span = document.createElement ('span'); span.innerHTML = ['<img class = "thumb" src = "' , e.target.result, '"title ="', escape (theFile.name), '"/>']. join (''); document.getElementById ('list'). insertBefore (span, null); };}) (f); // Чтение в файле изображения как URL-адрес данных. reader.readAsDataURL (е); }} document.getElementById ('files'). addEventListener ('change', handleFileSelect, false); </ Скрипт>Пример : чтение файлов. Попытайся!
Нарезка файла
В некоторых случаях чтение всего файла в память не лучший вариант. Например, допустим, вы хотите написать загрузчик асинхронных файлов. Одним из возможных способов ускорить загрузку было бы чтение и отправка файла в отдельных блоках диапазона байтов. Затем серверный компонент будет отвечать за восстановление содержимого файла в правильном порядке.
К счастью для нас, интерфейс File поддерживает метод слайса для поддержки этого варианта использования. В качестве первого аргумента метод принимает начальный байт, второй - конечный байт, а третий - строку типа содержимого параметра.
var blob = file.slice (начальныйБайт, конечныйБайт); reader.readAsBinaryString (блоб);В следующем примере демонстрируется чтение фрагментов файла. Стоит отметить, что он использует onloadend и проверяет evt.target.readyState вместо использования события onload.
<style> #byte_content {margin: 5px 0; максимальная высота: 100 пикселей; переполнение-у: авто; переполнение-х: скрыто; } #byte_range {margin-top: 5px; } </ style> <input type = "file" id = "files" name = "file" /> Чтение байтов: <span class = "readBytesButtons"> <button data-startbyte = "0" data-endbyte = "4 "> 1-5 </ button> <button data-startbyte =" 5 "data-endbyte =" 14 "> 6-15 </ button> <button data-startbyte =" 6 "data-endbyte =" 7 "> 7-8 </ button> <button> весь файл </ button> </ span> <div id = "byte_range"> </ div> <div id = "byte_content"> </ div> <script> функция readBlob ( opt_startByte, opt_stopByte) {var files = document.getElementById ('files'). files; if (! files.length) {alert ('Пожалуйста, выберите файл!'); вернуть; } var file = files [0]; var start = parseInt (opt_startByte) || 0; var stop = parseInt (opt_stopByte) || file.size - 1; var reader = new FileReader (); // Если мы используем onloadend, нам нужно проверить readyState. reader.onloadend = function (evt) {if (evt.target.readyState == FileReader.DONE) {// DONE == 2 document.getElementById ('byte_content'). textContent = evt.target.result; document.getElementById ('byte_range'). textContent = ['Читать байты:', start + 1, '-', stop + 1, 'of', file.size, 'byte file']. join (''); }}; var blob = file.slice (начало, остановка + 1); reader.readAsBinaryString (блоб); } document.querySelector ('. readBytesButtons'). addEventListener ('click', function (evt) {if (evt.target.tagName.toLowerCase () == 'button') {var startByte = evt.target.getAttribute (' data-startbyte '); var endByte = evt.target.getAttribute (' data-endbyte '); readBlob (startByte, endByte);}}, false); </ Скрипт>Пример : нарезка файла. Попытайся!
Отслеживание прогресса чтения
Одна из приятных вещей, которые мы получаем бесплатно при использовании асинхронной обработки событий, - это возможность отслеживать ход чтения файла; полезно для больших файлов, выявления ошибок и выяснения, когда чтение завершено.
События onloadstart и onprogress могут использоваться для отслеживания хода чтения.
Пример ниже демонстрирует отображение индикатора выполнения для контроля состояния чтения. Чтобы увидеть индикатор прогресса в действии, попробуйте большой файл или файл с удаленного диска.
<style> #progress_bar {margin: 10px 0; обивка: 3px; граница: 1px solid # 000; размер шрифта: 14 пикселей; ясно: оба; непрозрачность: 0; -моз-переход: непрозрачность 1с линейная; -опереход: непрозрачность 1с линейная; -webkit-transition: непрозрачность 1с линейная; } # progress_bar.loading {opacity: 1.0; } #progress_bar .percent {background-color: # 99ccff; высота: авто; ширина: 0; } </ style> <input type = "file" id = "files" name = "file" /> <button onclick = "abortRead ();"> Отменить чтение </ button> <div id = "progress_bar"> < div class = "процент"> 0% </ div> </ div> <script> var reader; var progress = document.querySelector ('. процент'); function abortRead () {reader.abort (); } function errorHandler (evt) {switch (evt.target.error.code) {case evt.target.error.NOT_FOUND_ERR: alert ('File Not Found!'); перерыв; case evt.target.error.NOT_READABLE_ERR: alert («Файл не читается»); перерыв; case evt.target.error.ABORT_ERR: перерыв; // noop default: alert ('Произошла ошибка при чтении этого файла.'); }; } function updateProgress (evt) {// evt - это ProgressEvent. if (evt.lengthComputable) {var процентLoaded = Math.round ((evt.loaded / evt.total) * 100); // Увеличить длину индикатора выполнения. if (centLoaded <100) {progress.style.width =centLoaded + '%'; progress.textContent =centLoaded + '%'; }}} function handleFileSelect (evt) {// Сброс индикатора прогресса при выборе нового файла. progress.style.width = '0%'; progress.textContent = '0%'; читатель = новый FileReader (); reader.onerror = errorHandler; reader.onprogress = updateProgress; reader.onabort = function (e) {alert ('чтение файла отменено'); }; reader.onloadstart = function (e) {document.getElementById ('progress_bar'). className = 'loading'; }; reader.onload = function (e) {// Убедитесь, что индикатор выполнения отображает 100% в конце. progress.style.width = '100%'; progress.textContent = '100%'; setTimeout ("document.getElementById ('progress_bar'). className = '';", 2000); } // Чтение в файле изображения в виде двоичной строки. reader.readAsBinaryString (evt.target.files [0]); } document.getElementById ('files'). addEventListener ('change', handleFileSelect, false); </ Скрипт>Пример : отслеживание хода чтения. Попытайся!
Рекомендации
LastModifiedDate?LastModifiedDate?
