[英]jQuery Ajax progress on image upload
我使用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
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.