javascript - Upload file with progress bar -

i create code upload file usin ajax , php , want add progress bar show percent of upload.

this code

<script>    $("form#data").submit(function(){     var formdata = new formdata($(this)[0]);     $.ajax({         url: "functions/video.php",         type: 'post',         data: formdata,         async: false,         success: function (data) {             document.getelementbyid("status").innerhtml = data;         },         cache: false,         contenttype: false,         processdata: false     });     return false; }); </script> <form id="data" method="post" enctype="multipart/form-data"> <input name="up_vid" type="file" id="up_vid"/> <div class="upload_v_icon"></div> <div class="video_info">     <input type="text" name="video_title" placeholder="video title" />     <input type="text" name="tags" placeholder="funny,9gag,nice,crazy ..."/>     <textarea name="description" placeholder="description"></textarea>     </div>     <div class="bg_upload">     <p>when upload video agree <a href="">terms</a> of service.</p>     <button>begin upload</button>     </div> </form> 

thank you.

this assumes 1px wide gif called "progress.gif" present. set color of color want progress bar appear.

add css:

.uploadbar {    background-image:url(/images/progress.gif);    background-position: -1px;    background-repeat:no-repeat;    background-size=0% 100%; width:100%;    position: relative; overflow: hidden; } 

add $.ajax();

xhr: function() {    var xhr = new window.xmlhttprequest();    //upload progress    xhr.upload.addeventlistener("progress", function(evt) {       if (evt.lengthcomputable) {       var percentcomplete = evt.loaded / evt.total;       console.log(percentcomplete);       $('.uploadbar').css({ backgroundsize: (percentcomplete*100) + '%'});       }    }, false);    return xhr;    }