javascript — генерация полосы загрузки / процента при загрузке изображения AJAX

Question

javascript — генерация полосы загрузки / процента при загрузке изображения AJAX

У меня есть функция загрузки изображений, которая работает следующим образом:

$('.update-insertimage-form').submit(function() {
$(".submit-newupdate-btn").addClass('disabled');
var rootAsset = $('.rootAsset').html();
var formData = new FormData($('.update-insertimage-form')[0]);
$.ajax({
url: rootAsset+'saveUploadedImage',
type: 'post',
cache: false,
dataType: 'json',
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
$(".form-control-addupdate").append('<div class="uploading-overlay">Uploading Image...</div>');
$(".uploading-overlay").fadeIn();
},
success: function(data) {
$(".submit-newupdate-btn").removeClass('disabled');
if(data.errors) {
$('.modal-body').append('<div class="alert alert-danger centre-text modal-error-message" role="alert"><strong>Error!</strong> '+ data.errors +'</div>');
} else if (data.success) {
$(".form-control-addupdate").append('<img class="temp_added_image" src="/public_html/user_uploads/build_images/'+data.name+'.jpeg"><br><br>');
$(".uploading-overlay").fadeOut(function(){
$(".uploading-overlay").remove();
});
var $t = $('.form-control-addupdate');
$t.animate({"scrollTop": $('.form-control-addupdate')[0].scrollHeight}, "slow");
}
},
error: function(xhr, textStatus, thrownError) {
alert('Something went to wrong.Please Try again later...');
}
});
return false;
});

Вместо того, чтобы просто «загрузить изображение», я хочу показать пользователю процент или строку загрузки и т. Д. Я искал вокруг, но не могу найти много информации. Мои мысли до сих пор отслеживают, когда выполняется вызов ajax, а затем, когда возвращается успешный обратный вызов. Но не знаю, как создать процент загрузки и т. Д.

Я бы предпочел использовать процентное число в сравнении с полосой загрузки, и это может быть «поддельное» число, лишь бы оно увеличивалось и заканчивалось на 100% при загрузке изображения.

Спасибо!

РЕДАКТИРОВАТЬ: Просто чтобы прояснить, мне не нужен конкретный и реальный процент. Просто способ увеличения от 1 до 100% с момента вызова до его получения.

0

ajax javascript jquery php progress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы захотите включить опцию xhr в запрос AJAX и добавить прослушиватель событий, чтобы отслеживать ход выполнения запроса:

xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.addEventListener('progress', function(e) {
$('.progressbar .bar').css('width', '' + (100 * e.loaded / e.total) + '%');
$('.progresspercent').text((100 * e.loaded / e.total) + '%');
});
return xhr;
},

Где progressbar и progresspercent являются элементами в вашем HTML

4