是否可以使用jQuery ajax获取具有非常大的文本字段的表单的上传进度? 我认为客户端知道已经发送了多少字节,但是当我使用Google时,我只能使用服务器站点代码找到文件上传的解决方案。
这是我的ajax请求:
$.ajax({
type: "POST",
url: "index.php?action=saveNewPost",
data: {textbox1: textbox1,textbox2: textbox2},
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function(){
//
}
});
我希望有一个类似“onProgress”的东西,其参数包含已发送的字节数...
找到解决方案
$.ajax({
xhr: function() {
var req = $.ajaxSettings.xhr();
if (req) {
req.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
$('#ajaxFeedbackDiv').html(event.loaded); // = 'test'; //event.loaded + ' / ' + event.total;
}
}, false);
}
return req;
},
type: "POST",
url: "index.php?action=saveNewPost",
data: {textbox1: textbox1,textbox2: textbox2},
contentType: "application/x-www-form-urlencoded;charset=UTF-8"
}
});
这似乎有效,尽管还有
2个问题:
答案 0 :(得分:4)
您可以使用支持HTML5的浏览器中的新XMLHttpRequest
对象来实现此目的。它支持您可以订阅的progress
事件,并获得AJAX操作的通知。
以下是一个例子:
document.getElementById('myForm').onsubmit = function() {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
document.getElementById('progress').innerHTML = percentage + '%';
}
}, false);
xhr.open(this.method, this.action, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
xhr.send(new FormData(this));
return false;
};
这是一个live demo
。
答案 1 :(得分:0)