In this post we will learn how to create a File Upload Progress Bar. We also covered a tutorial about ajax file upload. But in that tutorial we were not showing the progress of the file upload. As showing a progress bar when the file is getting uploaded to the server is an essential feature.
For server side I will be going to use PHP. We will also use HTML and CSS for the designing of our File Upload Progress Bar. To implement the progress bar we will use jQuery Form Plugin.
Before starting the tutorial you can checkout this video demo of the File Upload Progress Bar.
Creating our PHP Project
- I am using wamp server. You can use any of the PHP Server. So for wamp we have to the root directory which is www (c:/wamp/www) in wamp’s case.
- Now create a new folder inside the root directory. I created fileupload.
- First create an html file named index.html. Inside this file we will create our html form. You can create the form using the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <!-- Adding jQuery --> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <!-- adding jquery form plugin --> <script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script> </head> <body> <!-- Our form --> <form method='post' action='upload.php' enctype='multipart/form-data'> <input type='file' name='file' /> <button>Upload</button> </form> <!-- Area to display the percent of progress --> <div id='percent'></div> <!-- area to display a message after completion of upload --> <div id='status'></div> </body> </html> |
- Now we need to create upload.php file to handle the file upload.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php //Checking the request if($_SERVER['REQUEST_METHOD']=='POST'){ //Getting the file $file = $_FILES['file']['tmp_name']; //Getting the name of the file $name = $_FILES['file']['name']; //Path to upload $path = 'uploads/'; //Storing the file to location move_uploaded_file($file,$path.$name); //displaying success message echo 'success'; } |
- Now finally we need to write the following script inside the html page to make it work.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> $(function() { $(document).ready(function(){ var percent = $('#percent'); var status = $('#status'); $('form').ajaxForm({ beforeSend: function() { status.empty(); var percentVal = '0%'; percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; percent.html(percentVal); }, complete: function(xhr) { status.html(xhr.responseText); } }); }); }); </script> |
- Thats it, now try running your app. You can see the output below.
- We can make it more cool using CSS.
Applying CSS in File Upload Progress Bar
- First modify your index.html file as below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script> <link rel='stylesheet' href='style.css' /> </head> <body> <div class='formarea'> <h2>File Upload Progress Bar Example</h2> <form method='post' action='upload.php' enctype='multipart/form-data'> <input type='file' name='file' /> <button>Upload</button> </form> <div id="bararea"> <div id="bar"></div> </div> <div id='percent'></div> <div id='status'></div> </div> <script> $(function() { $(document).ready(function(){ var bar = $('#bar') var percent = $('#percent'); var status = $('#status'); $('form').ajaxForm({ beforeSend: function() { status.empty(); var percentVal = '0%'; bar.width(percentVal); percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; percent.html(percentVal); bar.width(percentVal); }, complete: function(xhr) { status.html(xhr.responseText); } }); }); }); </script> </body> </html> |
- And create a file named style.css and add the following css code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
body{ font-size:120%; line-height:2; font-family:calibri; } .formarea{ width:60%; margin:0 auto; background-color:#6082bb; text-align:center; padding:4%; border-radius:5px; } #bararea{ width:100%; height:40px; border:2px solid #FFFFFF; } #bar{ width:1%; margin:4px 0; height:32px; background-color:#FFFFFF; } #status{ color:#ffffff; } |
- Now you will see the following output.
- You can go to this link to test the uploader.
- You can also download my source code if having trouble.
[sociallocker id=1372] [download id=”2196″] [/sociallocker]
So thats all for this File Upload Progress Bar tutorial. Feel free to ask if having any confusions or queries regarding this tutorial. Thank You 🙂
