Комментарий: Сегодня я поделюсь с вами простой приложением, чтобы продемонстрировать метод использования FileReader. FileReader - это API операции файла, предоставляемый в HTML5. Друзья, которые нуждаются в этом, могут узнать об этом.
В предыдущих статьях я поделился с вами несколькими примерами HTML5, а именно демонстрации функции перетаскивания, демонстрации содержимого редактируемого страницы и демонстрации локальной функции хранения. Сегодня я поделюсь с вами простым приложением, чтобы продемонстрировать метод использования FileReader, API операции файла, предоставленного в HTML5.Когда вы смотрите на примеры HTML 5, которые я писал ранее, я думаю о создании простого, но применимого примера для тренировки этих новых функций HTML5 еще более странным образом. Моя цель состоит не в том, чтобы просто показывать эти API HTML 5, но и использовать примеры, чтобы сообщить разработчикам, как действительно реализовать эти API практичным и инновационным образом.
В HTML5, доступ к локальной файловой системе с веб -страницы, становится очень простым, то есть с помощью API файла. Эта спецификация файла предоставляет API для представления объектов файла в веб -приложении. Вы можете выбрать их и получить доступ к их информации с помощью программирования. Этот файл API включает в себя:
Последовательность FileList представляет собой массив отдельных файлов, выбранных в локальной системе. Пользовательский интерфейс, используемый для выбора файла, может быть реализован с помощью вызова <input type = file>.
Интерфейс Blob, который представляет исходные двоичные данные, с помощью которых вы можете получить доступ к данным байтов внутри.
Файл-интерфейс содержит информацию атрибута только для чтения файла, такую как имя файла, тип файла и адрес доступа к данным файла.
Интерфейс FileReader, который предоставляет метод для чтения файла, и модель событий, которая получает результат чтения файла.
Интерфейс FileError и объект FileException, который определяет условия генерации ошибок в этой спецификации.
Как использовать этот пример: в этом примере я дал артборду, где вы можете перетаскивать изображение из локальной файловой системы, или вы также можете использовать поле выбора файла для выбора изображения. В примере, пожалуйста, выберите только файл изображения, я не добавил фильтрацию файла и проверку типа файла. Помните, что ни один браузер полностью реализует HTML5. Этот пример необходимо запустить в браузере, который поддерживает HTML5, такой как Firefox 3.5 или выше.
Основной метод реализации файла API очень прост, как и следующее:
Функция ImageSessed (myfiles) {
for (var i = 0, f; f = myfiles [i]; i ++) {
var ImageReader = new FileReader ();
ImageReader.onload = (function (afile) {
возврат функции (e) {
var span = document.createElement ('span');
span.innerhtml = ['<img src = "', e.target.result, '"/>']. join ();
document.getElementbyId ('pockbs') .insertbefore (span, null);
};
}) (f);
ImageReader.readasDataurl (F);
}
}
функция Dropit (e) {
Имагазок (e.datatransfer.files);
e.stoppropagation ();
e.preventdefault ();
}
Я решил разместить свое событие Ondrop на <TD>:
<td align = левая высота = 105 ″ ondragenter = return false ondragover = return false ondrop = dropit (event)>>
<Вывод идентификатор = Thumbs> </output>
</td>
В этом примере я просто перетаскиваю локальный файл в артборд. Тем не менее, я думаю, что это может показать вам простые, но мощные возможности API файла