Jquery / HTML5 / Ajax upload progress bar?

问题

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?

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

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

回答1:

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);

回答2:

Have you tried the progress bar of jquery UI?

Main of jQuery Progress Bar

来源：https://stackoverflow.com/questions/13766534/jquery-html5-ajax-upload-progress-bar