Здравствуйте. Отправляю файл с помощью ajax и phpmailer с сайта себе на почту. Он без проблем отправляется и приходит, только есть небольшая проблема: если отправлять большой файл, пользователь не сможет отмониторить происходящее и может подумать, что ничего не происходит, поэтому решил я прикрутить progressbar.
Вот он:
<progress id="progressbar" value="0" max="100"></progress>
$(function(){
'use strict';
var progressBar = $('#progressbar');
$('#form').on('submit', function(e){
e.preventDefault();
var fd = new FormData( this );
$.ajax({
url: 'send.php',
type: 'POST',
contentType: false,
processData: false,
data: fd,
success: function(msg){
if(msg == 'ok') {
$(".send").val("Отправлено");
} else {
$(".send").val("Ошибка");
setTimeout(function() {$(".send").val("Отправить");}, 3000);
}
},
xhr: function(){
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener('progress', function(evt){
if(evt.lengthComputable) {
var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
progressBar.val(percentComplete).text('Загружено ' + percentComplete + '%');
}
}, false);
return xhr;
}
});
});
});
Только вот один косяк есть. Прогресс бар заполняется за пару секунд, даже если файл большой. С маленькими файлами он заполняется примерно за секунду, а с большими: секунды 2-3. Однако ответ от сервера об успешной отправки письма придёт только секунд через 10 с маленьким файлом, и через секунд 25 с большим.
Перефразирую: выбираю файл > нажимаю отправить > за пару секунд заполняется прогресс бар до 100% > через 15 секунд приходит ответ от сервера, что письмо отправлено.
Как решить такую проблему? Как относительно равномерно заполнять прогресс бар?