为什么我的HTML5进度条不会随着jQuery AJAX而改变?
我想为我的jQuery/AJAX上传脚本制作一个进度条。脚本中的所有内容都能正常工作,除了进度条的值永远不会改变。另外,在控制台中,percentComplete变量总是只有1,它会记录两次。我尝试过所有可以找到的东西,但似乎没有任何效果。进度条本身被添加到我的div中,但就是这样。为什么我的HTML5进度条不会随着jQuery AJAX而改变?
$.ajax({
beforeSend : function(){
$(settings.message_div).html('<progress id="#upload-progress" value="0" max="100"></progress>');
},
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded/evt.total;
//Do something with upload progress
console.log(percentComplete);
$('#upload-progress').val(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded/evt.total;
//Do something with download progress
console.log(percentComplete);
$('#upload-progress').val(percentComplete);
}
}, false);
return xhr;
},
type: "POST",
dataType: "xml",
data: formData,
url: settings.ajax_url,
processData: false,
contentType: false,
cache: false,
success: function(xml){
//console.log('ajax called');
},
error: function(xhr){
$(settings.message_div).html(xhr.responseText);
//console.log(xhr.responseText);
}
});
这是从here
onprogress
应采取的近期工作。你看到的教程有点过时了。 http://www.html5rocks.com/en/tutorials/file/xhr2/
http://www.w3.org/TR/progress-events/#introduction
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var progressBar = $('#upload-progress').get(0);
progressBar.value = (e.loaded/e.total) * 100;
progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
}
的tutorial你跟着是真的老可能是相关的周围jQuery的1.5。但由于该版本,老XHR
对象已经被隐藏,并通过JQXhr对象换成更高的抽象层次:由$阿贾克斯(返回
jQuery的的XMLHttpRequest(jqXHR)对象)在jQuery的1.5是浏览器的原生XMLHttpRequest对象的超集。例如,它包含responseText和responseXML属性以及一个getResponseHeader()方法。当传输机制不是XMLHttpRequest(例如,JSONP请求的脚本标记)时,jqXHR对象尽可能模拟本机XHR功能。
此对象的属性没有很好的记录,我不知道这是否仍然支持upload
和progress
功能,例如尝试在你的代码才能利用。
即使在博客的评论,人们使用的xhrFields
选项onprogress
属性建议,但再次this SO Post证实,因为它已被弃用,这是不可能的jQuery中的较新版本。在那个岗位只,答案提示:
的XHR选项参数必须是返回原生XmlHttpRequest对象jQuery的使用功能。从the answer
代码片段:
$.ajax({
async: true,
contentType: file.type,
data: file,
dataType: 'xml',
processData: false,
success: function(xml){
// Do stuff with the returned xml
},
type: 'post',
url: '/fileuploader/' + file.name,
xhr: function(){
// get the native XmlHttpRequest object
var xhr = $.ajaxSettings.xhr() ;
// set the onprogress event handler
xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ;
// set the onload event handler
xhr.upload.onload = function(){ console.log('DONE!') } ;
// return the customized object
return xhr ;
} ;
});
类似的路线另一个relevant Answer,他采用的是deferred object'sprogress
属性定义里面的上传进度的事件处理程序。
TLDR-,如果你可以使用本机XHR
对象,并利用它的上传和进度事件就像你在jQuery的最新版本何况这是不成立的。
您应该查看一些HTML5和jquery文件上传插件的代码。我只是通过one会在github上,我刚刚从fileupload.js
复制粘贴一些代码项目:
_onProgress: function (e, data) {
if (e.lengthComputable) {
var now = ((Date.now) ? Date.now() : (new Date()).getTime()),
loaded;
if (data._time && data.progressInterval &&
(now - data._time < data.progressInterval) &&
e.loaded !== e.total) {
return;
}
data._time = now;
loaded = Math.floor(
e.loaded/e.total * (data.chunkSize || data._progress.total)
) + (data.uploadedBytes || 0);
// Add the difference from the previously loaded state
// to the global loaded counter:
this._progress.loaded += (loaded - data._progress.loaded);
this._progress.bitrate = this._bitrateTimer.getBitrate(
now,
this._progress.loaded,
data.bitrateInterval
);
data._progress.loaded = data.loaded = loaded;
data._progress.bitrate = data.bitrate = data._bitrateTimer.getBitrate(
now,
loaded,
data.bitrateInterval
);
// Trigger a custom progress event with a total data property set
// to the file size(s) of the current upload and a loaded data
// property calculated accordingly:
this._trigger(
'progress',
$.Event('progress', {delegatedEvent: e}),
data
);
// Trigger a global progress event for all current file uploads,
// including ajax calls queued for sequential file uploads:
this._trigger(
'progressall',
$.Event('progressall', {delegatedEvent: e}),
this._progress
);
}
},
_initProgressListener: function (options) {
var that = this,
xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
// Accesss to the native XHR object is required to add event listeners
// for the upload progress event:
if (xhr.upload) {
$(xhr.upload).bind('progress', function (e) {
var oe = e.originalEvent;
// Make sure the progress event properties get copied over:
e.lengthComputable = oe.lengthComputable;
e.loaded = oe.loaded;
e.total = oe.total;
that._onProgress(e, options);
});
options.xhr = function() {
return xhr;
};
}
}
这绝对可以作为这个项目是非常良好的维护,并有工作演示。我认为这应该是一个很好的起点。希望能帮助到你。
@ ShoeLace1291,你得到你的问题排序?如果答案有帮助,请指出将其标记为已接受,以便其他类似问题的人也可以从中受益。谢谢。 – 2014-11-11 11:31:50