Jquery / HTML5 / Ajax上传进度条？

我正在研究一个简单的S3上传器，让它执行并执行我需要做的事情; 但是，我想知道是否有一个很容易创建上传进度条？

在浏览器的底部，有一条浏览器消息显示“正在上传” – 是否有任何文章有人知道这个背驮式显示加载栏？

理想情况下，该变量将传递给jquery函数，该函数在引导进度条（接受整数）中呈现百分比。

这里的目标是更美观，不一定100％准确。

Answer 1

如果您正在使用XMLHttpRequest对象，则可以使用onprogress事件和事件的lenghtcomputable attr。您应该只在XMLHttpRequest支持进度时执行此操作（test =“upload”in new XMLHttpRequest）

var xhr = new XMLHttpRequest(); xhr.open('POST', 'post/picture'); xhr.onload = function() { progress.value = progress.innerHTML = 100; }; xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var complete = (event.loaded / event.total * 100 | 0); progress.value = progress.innerHTML = complete; } } xhr.send(formData); 

Answer 2

你有没有尝试过jquery UI的进度条？

jQuery Progress Bar的主要内容