Файл -интерфейс HTML5 использует файлы для загрузки на веб -странице

Файл -интерфейс предоставляет информацию, связанную с файлами, и запускает JavaScript на веб -странице, чтобы получить доступ к содержимому файлу.

Объект файла происходит от объекта FileList, возвращаемого пользователем, чтобы выбрать файл с входным тегом, из объекта DataTransfer операции перетаскивания. Файл -объект представляет собой специальную каплю, которую можно использовать в любом контексте, который можно использовать в Blob.

Чтобы использовать файлы на веб -странице, объекты, которые обычно должны быть вовлечены: объект файла, объект FileList, объект FileReader.

FileList происходит из двух мест, свойства файлов входного элемента и API перетаскивания (когда файл перетаскивается, Event.datatransfer.files - это объект FileList)

 <input id = fileitem type = file> var filelist = document.getElementbyid ('fileitem')

Длина: этот атрибут возвращает только длину файлового объекта, содержащегося в объекте FileList.

Item (index): Получите указанный объект файла в указанном положении в объекте FileList. Это может быть проинформировано в виде нескольких индексов массива

Каждый из объекта FileList является объектом файла. Файл объект - это специальная капля.

1.lastmodify: время, когда файл пересмотрен, на этот раз миллисекунд пройдены в 0: 0: 00 1 января 1970 года. Это читаемый атрибут

2.NAME: имя файла файла, на которое ссылается объект файла, который является читаемым атрибутом

3.Type: Тип файла файла, на который ссылается объект файла, является тип шахты, который является читаемым атрибутом.

4.Size: размер файла файла, на который ссылаются объект файла, этот атрибут единого.

Невозможно определить объект файла в одиночку, но у него есть способ унаследовать от объекта Blob.

Объект FileReader позволяет веб -приложениям читать файлы на пользовательском компьютере асинхронно.

FileReader () - это конструктор, который может создать новый объект FileReader.

var fileReader = new FileReader ();

1.error: возвращает ошибку, которая возникает во время процесса чтения.

2. Ресюльт: возвращает содержимое файла, а тип достоин типа или ArrayBuffer. Этот атрибут является законным только после прочтения операции.

3.ReadyState: возвращает текущее состояние операции.

1. abort (): операция прерывания чтения. Значение готового штата становится 2. 2.

2. readasarraybuffer (Blob): прочитайте указанный каплей, такой как объект файла (объект файла является специальной каплей). Пока чтение завершено, значение свойства готового штата станет 2, а атрибут результата - это Arraybuffer, который представляет данные файла.

3. ReadasDataurl (Blob): прочитайте указанный каплей, такой как объект файла (специальная капля). Пока чтение будет завершено, значение атрибута Beadystate станет 2. Атрибут результата -это URL, который представляет данные файла, а формат данных -это строка BASE64 -ENCODER STRING

 <input type = file onchange = previewFile ()> <br> <img src = height = 200 var preview = document.queeryselector ('img'); Файлы [0];

4. readaStext (сиська, кодирование): прочитайте указанный каплей, такой как объект файла (объект файла является специальной каплей). Пока вы его читаете, значение свойства готового штата станет 2, а атрибут результата - это текстовая строка, которая представляет данные файла. Второй параметр является необязательным.

1. АБОРТ: прекращение при чтении операции.

2. Ошибка: запускается при операциях с чтением во время операции.

3. Нагрузка: запускается при успешном чтении операции.

4. Нагрузка: запускается в конце операции чтения. Не могу прочитать успех или неудачу.

5. Нагрузка: запускается в начале операции чтения.

6. Процесс: запускается во время процесса чтения.

Используя объект файла в HTML5, вы можете получить доступ к выбранным локальным файлам и прочитать контент в этих файлах. Объект файла принадлежит либо к элементу ввода, либо в интерфейсе перетаскивания.

 <input type = file id = input>

Доступ к файлам, выбранным с помощью ввода

 var selectFile = document.getElementById ('input').

Вы можете выбрать только один файл за раз. Выберите несколько файлов за раз перед гекконом 1.9.2.

Для интерфейса перетаскивания вы можете просмотреть html5 dragevent.

Шаг 1: Создайте область размещения. Обычный элемент, такой как Div, P и т. Д.

Шаг 2: Добавьте Drop, Dragenter, Dragover Event Schrogment в зону размещения. Ключевой ролью является программа обработки событий Drop.

Ниже приведен пример короткой диаграммы:

 <div id = 'dropbox' class = 'dropbox'> </div> .dropbox {Border: Solid 3px Red;

 Var dropbox; (e) {e.stoppropagation (); ); i]; );

Выше представлено файловое интерфейс HTML5, представленное Xiaobian для загрузки файлов на веб -странице. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!