Multiple file upload with progress bar AJAX

I’m trying to change the code below to upload multiple files.

Each with a separate progress bar as shown below.

Please help.

enter image description here

This is the code

<!DOCTYPE html> <html> <head> <script>
        function _(el){
            return document.getElementById(el);
        function uploadFile(){
            var file = _("file1").files[0];
            // alert(" | "+file.size+" | "+file.type);
            var formdata = new FormData();
            formdata.append("file1", file);
            var ajax = new XMLHttpRequest();
            ajax.upload.addEventListener("progress", progressHandler, false);
            ajax.addEventListener("load", completeHandler, false);
            ajax.addEventListener("error", errorHandler, false);
            ajax.addEventListener("abort", abortHandler, false);
  "POST", "file_upload_parser.php");
        function progressHandler(event){
            _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of ";
            var percent = (event.loaded / * 100;
            _("progressBar").value = Math.round(percent);
            _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
        function completeHandler(event){
            _("status").innerHTML =;
            _("progressBar").value = 0;
        function errorHandler(event){
            _("status").innerHTML = "Upload Failed";
        function abortHandler(event){
            _("status").innerHTML = "Upload Aborted";
    </script> </head> <body> <h2>HTML5 File Upload Progress Bar Tutorial</h2> <input type="file" name="file1" id="file1"><br> <input type="button" value="Upload File" onclick="uploadFile()"> <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <h3 id="status"></h3> <p id="loaded_n_total"></p> </form> </body> </html> 

Source: ajax

Leave a Reply