CODEWITHSUNDEEP
javajqueryupload
Andy Sanchez
Andy Sanchez

Reputation: 197

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.

This is the upload percent from the browser

Upvotes: 2

Views: 2023

Answers (2)

Marcelo Biffara
Marcelo Biffara

Reputation: 831

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

Upvotes: 6

Federico J.
Federico J.

Reputation: 15882

Have you tried the progress bar of jquery UI?

Main of jQuery Progress Bar

Upvotes: 0

Related Questions