Jquery/HTML5/Ajax 上传进度条？答案

【问题标题】：Jquery / HTML5 / Ajax upload progress bar?Jquery/HTML5/Ajax 上传进度条？
【发布时间】：2012-12-08 00:14:04
【问题描述】：

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

在浏览器的底部，有一条显示“正在上传”的浏览器消息 - 是否有任何人知道关于搭载此功能以显示加载栏的文章？

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

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

【问题讨论】：

标签： java jquery upload

【解决方案1】：

如果您使用的是 XMLHttpRequest 对象，则可以使用 onprogress 事件和事件的 lenghtcomputable 属性 .只有当您的 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);

【讨论】：

这确实是正确的做法。

【解决方案2】：

你试过jquery UI的进度条吗？

Main of jQuery Progress Bar

【讨论】：

他想知道的是，如何获取上传过程的状态