HTML5 файл загрузить код экземпляра загрузки

Файл API, предоставленный в HTML5, имеет множество приложений в передней части. И совместимость каждого браузера также лучше, включая мобильный терминал, за исключением IE, поддерживая только версию IE10 или выше. Если вы хотите лучше освоить функцию операционного файла, вы должны сначала ознакомиться с каждым API.

Метка input [type = file] в HTML имеет несколько атрибутов, позволяя пользователям выбирать несколько файлов, а объект FileList означает список файлов, выбранных пользователем. Каждый файл в этом списке является объектом файла.

1. Атрибут объекта файла:
2. Имя: Имя файла не включает пути.
3. Тип: Тип файла. Файлы типа файла начнутся с изображения/, которое может быть ограничено загрузкой изображения.
4. Размер: размер файла. Другие операции могут быть выполнены в соответствии с размером файла.
5. LastModify: окончательное время изменения файла.

 <input type = file id = files> <script> var elem = document.getElementbyId ('files'); это изображения, а размер файла составляет менее 200 КБ if (files [i] .type.indexof ('image/')! == -1 && files [i] .size <204800) {console.log (файлы [i] .Name);}}} </script>

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

Принять = Image/* может использоваться для ограничения только для загрузки форматов изображений. Тем не менее, есть проблема с медленным ответом в браузере Webkit.

Решение состоит в том, чтобы изменить* проход на указанный тип MIME.

 <input type = file Accept = Image/Gif, Image/JPEG, Image/JPG, Image/PNG>

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

Как создать

Объект Blob может быть создан с помощью функции конструкции Blob ().

 var blob = new Blob (['hello'], {type: text/plain});

Первый параметр в конструкторе Blob - это массив, который может хранить объекты ArrayBuffer, объекты ArrayBufferview, объекты Blob и строку.

Объект Blob может вернуть новый объект Blob через метод slice ().

 var newblob = blob.slice (0,5, {type: text/plain});

Метод slice () использует три параметра, все необязательно. Первый параметр представляет начальную позицию двоичных данных в объекте Blob, второй параметр представляет собой конец репликации, а третий параметр - тип MIME объекта Blob.

Canvas.toblob () также может создавать объекты Blob. Toblob () использует три параметра, первым является функция обратного вызова, вторая - тип изображения, по умолчанию - изображение/PNG, третье - качество изображения, значение составляет от 0 до 1.

 var canvas = document.getElementById ('canvas');

Объекты Blod могут генерировать сетевой адрес через объект window.url в сочетании с атрибутом загрузки тега для достижения функции загрузки файла.

Например, загрузите Canvas как файл изображения.

 var canvas = document.getelementbyid ('canvas'); var url = url.createObject "blob); var a = document.createElement ('a'); a.download = 'canvas'; a.href = url; // моделирует тег для загрузки a.click (); / / / Расскажите браузер после загрузки.

Строка также можно сохранить в виде текстового файла с аналогичным методом.

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

 var Reader = new FileReReader ();

У объекта есть следующие методы:

1. Аборт: прерывать операцию чтения.
2. ReadAsarrayBuffer: прочитайте содержимое файла в объект ArrayBuffer.
3. ReadAsBinaryString: читать файлы как двоичные данные.
4. Readasdataurl: прочитать файл как данные: формат URL.
5. READASTEXT: читать файлы как текст.

Общее приложение состоит в том, чтобы отобразить изображение через readasDataurl () после загрузки изображений на клиенту.

 <input type = file id = файлы access = image/jpeg, image/jpg, image/png> <img src = blank.gif id = preview> <script> var elem = d ('files'), img = документ. GetElementById ('preview'); .src = ev.target.result;} reader.readasdataurl (files [0]);}} </script>

Однако, когда вы делаете фотографии на некоторых мобильных телефонах, при загрузке фотографий будут ошибки, и будут найдены фотографии, включая Samsung и iPhone. Сущность Сущность Решение не объясняет здесь.

Readastext () объекта FileReader может считывать текст файла в сочетании с функцией объекта Blob для загрузки файла, затем файл экспорта данных резервным копированием в локальную область. Через ввод и используйте readaStext () для использования текста readaStext () и восстановить данные.

Код аналогичен вышеуказанной функции.

Методы ATOB и BTOA добавляются в HTML5 для поддержки кодирования BASE64. Их именование также очень просто.

 var a = https: //lin-xin.github.io; Iconsole.log (b);

Метод BTOA кодирует строку A, которая не будет изменять значение A, и вернуть значение после кодирования.

Метод ATOB декодирует закодированную строку.

Тем не менее, китайцы в параметрах превысили диапазон символов 8 -битного кодирования ASCII, и браузер сообщит об ошибке. Поэтому вам нужно сначала кодировать Encodeuricomponent.

 var a = world;

Приведенное выше содержимое этой статьи.