Jquery / HTML5 / Ajax upload progress bar?

Question

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.

This is the upload percent from the browser

Marcelo Biffara · Accepted Answer · 2012-12-07 16:14:04Z

6

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

edited Dec 7, 2012 at 16:14

answered Dec 7, 2012 at 16:02

Marcelo Biffara

8314 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Guillaume Esquevin Over a year ago

This is indeed the proper way to do it.

Federico J. · Accepted Answer · 2012-12-07 16:03:49Z

0

Have you tried the progress bar of jquery UI?

Main of jQuery Progress Bar

answered Dec 7, 2012 at 16:03

Federico J.

16k7 gold badges35 silver badges54 bronze badges

1 Comment

Marcelo Biffara Over a year ago

what he wants to know , is how the get the status of the upload process

Collectives™ on Stack Overflow

Jquery / HTML5 / Ajax upload progress bar?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related