java - Jquery/HTML5/Ajax 上传进度条？

Question

我正在开发一个简单的 S3 uploader ，让它执行并完成我需要做的事情；但是，我想知道是否有一种简单的方法可以创建一个上传进度条？

在浏览器的底部，有一条浏览器消息显示“正在上传”- 有没有人知道任何关于利用它来显示加载栏的文章？

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

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

Answer 1

如果您使用的是 XMLHttpRequest 对象，则可以使用 onprogress 事件和该事件的 lenghtcomputable 属性.你应该只在你的 XMLHttpRequest 支持进度时这样做(在新的 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);