Jquery/HTML5/Ajax上传进度条？

Question

我正在研究一个简单的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);