Как отображать процесс(в процентах) загрузки изображений через ajax?

Спросить
Создано 24 мая 2018 в 17:57
Просмотрели 66 раз
10
Например грузится большое изображение аяксом и нужно пользователю показать процент загрузки.. Как это делается? Сервер опрашивается несколько раз в секунду? Или как?
Добавлено: 24 мая 2018 в 17:57 eandreev Уровень: 5
Это как пример))

С частью html - всё достаточно просто, хотя и не так безоблачно. Для прогрессбара используют или тег (реже ), или создают кастомный из любого понравившегося html-элемента. Первые два не очень кроссбраузерны, но предусмотренный в них альтернативный текст, который можно использовать для показа процентов выполнения загрузки, немного исправляет положение. Со вторым вариантом - приходится повозится в CSS, но это не проблема для людей знающих. Мы остановимся на первом, т.к. у нас сейчас основная цель - разобраться с механизмом на JavaScript.

Итак, создадим простую форму для загрузки файла и после поля файла, разместим прогресс-бар, в котором нас интересуют два атрибута: value - текущее значение и max - максимальное значение. Так как мы будем использовать проценты, значения будут колебатся от нуля до ста. Соответственно стартовое значение (value) должно быть "0", а максимальное (max) - "100" :


HTML (файл index.html)









В JS пишем практически всё, что разбирали в статье по "загрузке файлов", но добавляем параметр xhr, в callback-функции которого, мы можем работать с объектом XMLHttpRequest, изменяя или дополняя его поведение, получать доступ его свойствам и методам, устанавливать свои обработчики событий и т.д.:

jQuery (файл script.js)

$(function(){
var progressBar = $('#progressbar');
$('#my_form').on('submit', function(e){
e.preventDefault();
var $that = $(this),
formData = new FormData($that.get(0));
$.ajax({
url: $that.attr('action'),
type: $that.attr('method'),
contentType: false,
processData: false,
data: formData,
dataType: 'json',
xhr: function(){
var xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
xhr.upload.addEventListener('progress', function(evt){ // добавляем обработчик события progress (onprogress)
if(evt.lengthComputable) { // если известно количество байт
// высчитываем процент загруженного
var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
// устанавливаем значение в атрибут value тега
// и это же значение альтернативным текстом для браузеров, не поддерживающих
progressBar.val(percentComplete).text('Загружено ' + percentComplete + '%');
}
}, false);
return xhr;
},
success: function(json){
if(json){
$that.after(json);
}
}
});
});
});
Что касается серверной части, то там работаем с файлом/файлами, как если бы вы их загружали обычным способом.
Готово! Теперь, чтобы протестировать на локальной машине, нужно выбрать файл побольше, иначе загрузка будет происходить практически моментально и работу прогрессбара, вы попросту не заметите. Что будет в обработчике в этом случае - не важно, главное, чтоб он был. И не забудьте перед тестированием, установить значение директивы upload_max_filesize чуть больше, чем загружаемый файл. Для времменого изменения - это проще всего сделать в файле .htaccess, прописав строку:

php_value upload_max_filesize 1000M # вместо 1000 - своё значение
P.S. На всякий случай, если кому-то понадобится сделать прогресс бар не на UPLOAD, а на DOWNLOAD то нужно внести маленькое изменение, а именно - установить соответствующий обработчик. Ну, естественно, что убрать лишнее. Такое может вам пригодиться, если, например, вы подгружаете на страницу большое изображение.

$(function(){
var progressBar = $('#progressbar'),
bigImg = '/image.png'; // путь к очень большой картинке
// В примере - по клику на какой-то кнопке
$('#get_big_file').on('click', function(e){
e.preventDefault();
$.ajax({
url: bigImg,
type: 'GET', // можно и POST
contentType: false,
processData: false,
xhr: function(){
var xhr = $.ajaxSettings.xhr();
// Устанавливаем обработчик подгрузки
xhr.addEventListener('progress', function(evt){
if (evt.lengthComputable) {
var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
progressBar.val(percentComplete);
}
}, false);
return xhr;
},
success: function(json){
// После того, как изображение полностью получено
// подставляем его URL и выводим на экран
if(json){
$('#output').html('');
}
}
});
});
}); – maksimp
[здесь был текст, скопированный с другого сайта, это запрещено правилами] – taskira
Прокомментировать..
Подписаться
1
Если у проблемы не выбран лучший совет, то цена за лучший совет растет ежеминутно. Если совет уже выбран - это не значит, что ваш совет не может стать лучшим (лучший совет может измениться если ваш наберет больше голосов). При равенстве голосов за совет, выигрывает тот, который был дан раньше. Совет должен содержать уникальную информацию относительно других уже данных советов. Если вы по большей части согласны с уже данным советом, то просто проголосуйте за него и добавьте уникальную информацию в комментарии. Система сама определяет сколько голосов необходимо набрать совету чтобы стать лучшим (этот показатель зависит от текущей степени активности на проекте)

Отчет по последней выплате

Статистика по текущей выплате

Ваш совет

Дать совет..
X
Укажите причину отрицательной оценки проблемы. Какой пункт правил нарушен?

X
Укажите причину отрицательной оценки совета. Какой пункт правил нарушен?

X