Статьи

Как создать графические индикаторы загрузки файлов в HTML5 и JavaScript

Декабрь 24, 2018

В моих предыдущих статьях мы узнали, как использовать перетаскивание файлов HTML5 , открывать файлы с помощью JavaScript и асинхронно загружать файлы с помощью Ajax . В заключительной части этой серии мы рассмотрим самую захватывающую часть процесса: графические индикаторы выполнения!

Индикаторы загрузки файла обеспечивают необходимую обратную связь с пользователем, но их было очень сложно реализовать. До сих пор это так. И Firefox, и Chrome поддерживают объект XMLHttpRequest2, который предлагает обработчик событий прогресса. Но сначала давайте рассмотрим, как будет реализован наш индикатор выполнения…

Тег прогресса HTML5

Новый тег progress

  • значение : текущее значение прогресса
  • max : значение при завершении

Тег был бы идеальным в этой демонстрации и, хотя он поддерживается в Chrome, он только появился в Firefox 6 . Кроме того, ни один браузер не предлагает много свойств стиля, поэтому я отбросил его в пользу стандартного тега p Это добавляется в детстве к div

Styling the Progress Bar

Наш тег p 

 
#progress p
{
	display: block;
	width: 240px;
	padding: 2px 5px;
	margin: 2px 0;
	border: 1px inset #446;
	border-radius: 5px;
}

Для самой зеленой полосы я создал рисунок, который был в два раза шире элемента прогресса (500 пикселей). Левый 250px окрашен, а правый 250px прозрачен:

индикатор

Этот рисунок используется в качестве фонового изображения для индикатора выполнения и расположен на «X% 0», где X% указывает на долю, которая остается (не завершена), т.е.

  • прогресс начинается с «background-position: 100% 0», то есть 100% осталось
  • прогресс заканчивается на «background-position: 0% 0», т.е. ничего не осталось
  • «Background-position: 30% 0» означает, что 70% выполнено:
    индикатор

Сплошной цвет применяется путем установки класса при успешной или неудачной загрузке: 

 
#progress p.success
{
	background: #0c0 none 0 0 no-repeat;
}

#progress p.failed
{
	background: #c00 none 0 0 no-repeat;
}

Реализация индикатора выполнения в JavaScript

Теперь мы можем изменить нашу функцию UploadFile (). Когда встречается действительный файл JPG, мы добавляем новый тег p 

 
// upload JPEG files
function UploadFile(file) {

	var xhr = new XMLHttpRequest();
	if (xhr.upload && file.type == "image/jpeg" && file.size <= $id("MAX_FILE_SIZE").value) {
	
		// create progress bar
		var o = $id("progress");
		var progress = o.appendChild(document.createElement("p"));
		progress.appendChild(document.createTextNode("upload " + file.name));

Теперь нам требуется функция обработчика события «progress». Он получает объект со свойствами .loaded и .total — для вычисления нового backgroundPosition необходима небольшая математика: 

 
		// progress bar
		xhr.upload.addEventListener("progress", function(e) {
			var pc = parseInt(100 - (e.loaded / e.total * 100));
			progress.style.backgroundPosition = pc + "% 0";
		}, false);

Если вы знакомы с Ajax, вы узнаете обработчик события onreadystatechange. Это определяет, когда загрузка была завершена, и соответственно отображает стиль индикатора выполнения (устанавливает класс «success», если загрузка прошла успешно): 

 
		// file received/failed
		xhr.onreadystatechange = function(e) {
			if (xhr.readyState == 4) {
				progress.className = (xhr.status == 200 ? "success" : "failure");
			}
		};

Наконец, мы отправляем файл на наш сервер PHP, как и раньше: 

 
		// start upload
		xhr.open("POST", $id("upload").action, true);
		xhr.setRequestHeader("X-FILENAME", file.name);
		xhr.send(file);

	}

}

Наконец, у нас есть решение, которое:

  1. позволяет перетаскивать файлы на элемент веб-страницы
  2. анализирует и отображает удаленные файлы на клиенте
  3. асинхронно загружает файлы на сервер
  4. показывает графическую индикатор выполнения во время загрузки
  5. использует прогрессивное улучшение для поддержки большинства браузеров
  6. кодируется без использования библиотеки JavaScript.

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

Я надеюсь, что вам понравилась эта серия и вы думаете, как перетаскивание файлов может помочь вашему веб-приложению.

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как Learn HTML5 .

39
Share: