Jquery / HTML5 / Ajax上传进度条？ [英] Jquery / HTML5 / Ajax upload progress bar?

问题描述

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

I'm working on a simple S3 uploader, got it to perform and do what I need to do; however, I was wondering if there was an easy to create an upload progress bar?

在浏览器的底部，有一条浏览器消息显示正在上传 - 是否有任何文章有人知道关于这个背负显示加载栏？

At the bottom of the browser, there is a browser message that says "Uploading" - is there any articles anyone knows about that piggy-backs off of this to display a loading bar?

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

Ideally, that variable will be passed to a jquery function that renders the percentage in the bootstrap progressbar (which accepts integers).

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

The goal here is to be more aesthetically pleasing, not necessarily 100% accurate.

推荐答案

如果您使用的是XMLHttpRequest对象，则可以使用onprogress事件和事件
的lenghtcomputable attr。只有当你的XMLHttpRequest支持进度时才应该这样做
（新的XMLHttpRequest中的test =upload）

if you're using a XMLHttpRequest object, you can use onprogress event and the lenghtcomputable attr of the event .You should only do this if your XMLHttpRequest supports progress (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);

这篇关于Jquery / HTML5 / Ajax上传进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！