Upload file with progress bar

Question

I create this code to upload file usin ajax and php and I want to add progress bar to show percent of upload.

this my 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 you upload this video your are agree with <a href="">Terms</a> of service.</p> <button>Begin Upload</button> </div> </form>

Thank you.

I think that async: false, is gonna be a problem. First, is it not AJAX, if it is not async, then it's nearly deprecated. I do not think you can use callback and async:false at the same time. — Vinks
– Vinks, Commented Feb 5, 2016 at 22:20

Vinny M · Accepted Answer · 2016-02-05 22:16:47Z

This assumes a 1px wide gif called "progress.gif" is present. Set the color of this to the color you want your progress bar to appear.

Add something like this to your 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 something like this to your $.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; }

Wrap your jQuery in $(document).ready(function() { }); or put the <script></script> below the form.

Collectives™ on Stack Overflow

Upload file with progress bar

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related