Загрузка файла приложения HTML5

В течение долгого времени разработчики были обеспокоены этим. Некоторые веб-сайты используют атрибут enableype = Multipart/Form Data тега формы, но этот атрибут требует от сервера, чтобы сделать специальные настройки для отображения прогресса, и это также сложно нас.

Теперь давайте посмотрим, почему HTML5 может решить эту проблему и насколько хорошо она может сделать.

В стандарте HTML5 объект xmlhttprequest переопределяется, известный как уровень 2 xmlhttprequest, который содержит следующие 5 новых функций:

1. Поддержка загрузки и загрузки байтов, таких как файлы, кажды

2. Добавлены прогресс в загрузке и загрузке

3. Поддержка запросов Cross -Domain

4. Разрешить анонимный запрос (то есть часть рефератов, которая не отправляет HTTP)

5. Разрешить время ожидания запроса

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

Приведенная выше диаграмма - это контент, которого мы можем достичь:

1. Отображение загруженной информации о файле, например, имя файла, тип, размер

2. Плата прогресса, которая может показать реальный прогресс

3. Скорость загрузки

4. Оценка остальной части времени

5. Объем данных, которые были загружены

6. Ответ сервера, возвращаемый после завершения загрузки

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

HTML5 добавляет новое событие Progress, которое предоставляет нам следующую информацию:

1. Общий размер -

2. Загружен -размер загруженного

3. Length -Complayble -Будь то прогресс быть рассчитанный

Информации не так много, но этого достаточно, чтобы рассчитать прогресс файла. Конечно, есть еще много вещей, которые он не дает напрямую, что жаль.

Это не сильно отличается от обычного кода загрузки файлов. Тем не менее, обратите внимание, что входной тег связывает функцию JavaScript на OnChange.

 <! row> <label for = filetoupload> выберите файл для upload </label> <input type = file name = filetoupload id = filetoupload = fileselec ted ();/> </div> <div id = filename> </div> <div id = fileSize> </div> <div id = fileType> </div> <div class = row> <input type = кнопка onclick = uploadfile () value = upload/>> << div

Как только мы используем вход в HTML, мы можем получить объект FileList в коде JS. Этот объект является частью недавно добавленного API файла в HTML5.

1. Имя - Имя файла (не включает PATH)

2. Тип -файл типа (строчный)

3. Размер -размер файла (блок байт)

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

 Функция FIRCED () {var file = document.getElementById ('fileToupload'). . size * 100 / (1024 * 1024)) / 100) .tring () + 'mb'; Document.GetElementById ('FilenAme') 'Type:' + file.type;}}

Так что же произойдет, когда пользователь выберет хороший файл и нажимает на загрузку?

 Функция uploadfile () {var xhr = new xmlhttprequest (); ; Send (fd);} функция uploadprogress (evt) {if (evt.lengthcomployable) {var incretcomplete = math.round. ) + '%';} Else {document.gtelementbyid ('progressnumber') .innerhtml = 'Невозможно вычислять';}} функция oploadcomplete (evt) { / * Это событие повышается, когда сервер отправляет ответ * / alert (evt.target.responsetext);

Во второй строке кода наш код JS использует еще один новый объект -формата, запущенный другим HTML5. Объект FormData - это набор данных формы пользователя. Мы отправляем данные на сервер, поворачивая этот объект.

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

 var fd = new FormData (); ]);

Вернуться к теме. Оглядываясь назад на предыдущий код, мы добавили много мониторинга событий Xmlhttprequest. В частности, важно отметить, что то, что мы связываем, это не Xmlhttprequest, а его атрибуты, такие как процесс загрузки.

Наконец, посмотрите на полный код.

 <! [0]; ) 'MB'; .name; Fd.Append (FileToupload, Document.getElementById ('fileToupload'). false); процент complete = math.round (ev.load * 100 / evt.total); Чтобы вычислить '; Пользователь или браузер отбросил соединение.);} </script> </head> <boody> <form id = form1 ectype = multipart/form-data method = post action = upload.php> <div class = row = row > <Label = fileToup Load> Выберите файл для opload </label> <input type = file name = fileToupload Id = fileToupload onChange = fileSelect ();/> </div> <div Id = FileName> </div> < div id = fi lesize> </div> <div id = filetype> </div> <div class = row> <input type = кнопка Onclick = uploadfile () value = upload/> </div M> </body> </html>

Наша задача выполнена? Можно сказать, что это завершено, потому что этот код смог выполнить задачу загрузки файлов, и он также может отображать прогресс загрузки; У нас есть много вещей, которые не были сделаны, такие как CSS, такие как CSS Beautify и так далее. Но это не тема нашей статьи.

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

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