javascript — прогресс jQuery Ajax при загрузке изображений
Я использую Ajax-запрос для загрузки изображения на свой сервер, я использую эти коды, он работает, но он возвращает мне только 100%, а не любые другие проценты. Что я должен делать?
$('#uploadImgForm').change(function(e){
var th = $(this);
$.ajax({
url: "post/imageInsert.php",
type: "POST",
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$("#imgBack").html('uploading').show();
},
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = Math.floor(evt.loaded / evt.total) * 100 + '%';
$('#progress').css({width : percentComplete});
}
}, false);return xhr;
},
success: function(data){
if(!data['error']) $("#imgBack").html($('<img>').attr('src',data['success']));
else $("#imgBack").html(data['error']);
},
error: function(){
$("#imgBack").html('Error').hide();
}
});
});
Решение
Попробуйте этот код
$('#uploadImgForm').change(function(e){
var th = $(this);
$.ajax({
url: "post/imageInsert.php",
type: "POST",
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$("#imgBack").html('uploading').show();
},
xhrFields: {
onprogress: function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.floor(evt.loaded / evt.total) * 100 + '%';
$('#progress').css({width : percentComplete});
}
}
},
success: function(data){
if(!data['error'])
$("#imgBack").html($('<img>').attr('src',data['success']));
else
$("#imgBack").html(data['error']);
},
error: function(){
$("#imgBack").html('Error').hide();
}
});
});
Другие решения
Я недавно сделал то же самое (сделал индикатор выполнения, чтобы указать процент загрузки изображений) и следующий код работает; Попробуйте это:
$("#uploadImgForm").on("submit", upload_image);
function update(evt){
var percentComplete = Math.floor(evt.loaded / evt.total) * 100 + '%';
$('#progress').css({width : percentComplete});
}
function upload_image(event){
event = event || window.event;
// Prevent the default form action i.e. loading of a new page
if(event.preventDefault){ // W3C Variant
event.preventDefault();
}
else{ // IE < 9
event.returnValue = false;
}
$.ajax({
url: "post/imageInsert.php",
type: "POST",
data: new FormData($('#uploadImgForm')[0]),
beforeSend: function(){
$("#imgBack").html('uploading').show();
},
xhr: function(){
// get the native XmlHttpRequest object
var xhr = $.ajaxSettings.xhr() ;
// set the onprogress event handler
xhr.upload.onprogress = update,
// set the onload event handler
xhr.upload.onload = function(){ } ;
// return the customized object
return xhr ;
},
success: function(data){
if(!data['error']) $("#imgBack").html($('<img>').attr('src',data['success']));
else $("#imgBack").html(data['error']);
},
error: function(){
$("#imgBack").html('Error').hide();
},
enctype: 'multipart/form-data',
processData: false,
contentType: false,
cache: false
});
}