document.querySelector("#send").onclick = function() { // access the file object var file = document.querySelector("#fileInput").files[0], xhr, reader; // handle the case where no file has been selected if ( !file ) { return false; } // Give immediate visual feedback with // the "indeterminate progress" animation var progress = document.querySelector("#progress"); progress.removeAttribute("value"); // This demo uses a fake XHR object simulating a slow upload // Use XMLHttpRequest to actually send a file xhr = new fakeXMLHttpRequest(); // listen for progress event on the upload request xhr.upload.addEventListener("progress", function(e) { // update the progress bar accordingly progress.value = e.loaded / e.total; // fallback for browsers not supporting <progress> progress.innerHTML = ~~(100 * e.loaded / e.total) + "%"; }); // upload the file xhr.open("POST", window.location.href); xhr.send(file); };
<div id="uploader"> <input id="fileInput" type="file"></input> <progress id="progress" value="0">0%</progress> </div> <div> <button id="send">Send</button> </div>