Всем привет.
Попробую 2 проблемы описать сразу, чтобы не плодить кучу тем. Сейчас пытаюсь разработать простенькую функцию загрузки файлов на сервер с помощью AJAX без всяких плагинов и прочего.
Есть простая форма на странице, код JS и PHP обработчик файлов.
В JS есть функция, которая вызывается при загрузке DOM и подгружает методом .load картинки. После ее отработки в ней же есть метод .ajax, который из формы берет файлы и загружает на сервер. В success стоит вызов снова этой же функции, но это не работает именно в IE (10).
Вот часть кода:
var getLogo = function(){
var lb = $("#logoBlock");
$(lb).load("/load/logo.php",function(){
var files;
$("#logoFile").change(function(){
files = this.files;
});
$('#submitLogo').click(function(){ // Загрузка логотипа
var self = $(this);
// Создадим данные формы и добавим в них данные файлов из files
if (typeof files == 'undefined'){
showMsg("Вы не указали файл логотипа!");
return false;
};
var data = new FormData();
data.append("userfile", $("#logoFile")[0].files[0]);
// Отправляем запрос
$.ajax({
url: '/action/logoUpload.php',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false,
contentType: false,
xhr: function(){
var progressBar = $('#progressbar');
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 тега <progress>
// и это же значение альтернативным текстом для браузеров, не поддерживающих <progress>
progressBar.val(percentComplete).text('Загружено ' + percentComplete + '%');
}
}, false);
return xhr;
},
success: function(data){
if(data.type == "success"){
showMsg(data.answer);
getLogo();
}else{
showMsg(data.answer);
}
}
});
return false;
});
});
}
getLogo();
Получается 2 проблемы:
1) в IE 10 в success не срабатывает getLogo();
2) Прогрессбар не работает, точнее он в один момент заполняется,а потом стоит и ждет оставшуюся загрузку, а это не пойдет ))) При небольшой модификации скриптов и выполнении мультизагрузки нескольких изображений, прогрессбар был бы очень кстати, можно даже не анимированная полоска, а даже удобнее цифры от 0 до 100%. Как высчитать общий объем суммы файлов, как узнать сколько уже загружено, как это передавать п процессе загрузки????
При мультизагрузке нескольких изображений одновременно прогрессбар вообще не движется.
кстати вот он в форме после инпута с файлом:
<progress id='progressbar' value='0' max='100'></progress>
Кто-нибудь сталкивался с этими проблемами? Буду очень признателен, если подскажете куда копать!
Заменил сейчас кусок с xhr на такой:
xhr: function(){
var xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
xhr.upload.onprogress = function(evt) {
$('.ajax-respond').text( 'Загружено на сервер ' + evt.loaded + ' байт из ' + evt.total );
}
return xhr;
},
Чтобы посмотреть как оно работает и увидеть в определенном div-е результат.
Так вот, результат в див выводится сразу, а загрузка продолжается дальше, но это не то что нужно. Я так понимаю событие срабатывает сразу после окончания передачи файлов серверной части, а сколько там сервер обрабатывает и сохраняет, клиентскую часть не интересует.
Хотелось бы увидеть все таки прогресс в целом, до момента оповещения пользователя о том, что все ОК.
