Skip to main content

File Upload With Progress Bar Using PHP


Good Day!!!

In this tutorial, we are going to make File Upload With Progress Bar Using PHP. In the example below, we have file input field and progress bar. During the uploading file, we are going to show the progress bar if it is done already.

And, also, we have to use the jQuery and AJAX function to do this functionally.

HTML File Form

We have a source code for our progress bar and file input field.

  1. <form id="upload_container" action="upload.php" method="post">
  2. <div>
  3. <label>Upload Image File:</label>
  4. <input name="userImage" id="userImage" type="file" class="demoInputBox" />
  5. </div>
  6. <br />
  7. <div><input type="submit" id="btnSubmit" value="Submit" class="btnSubmit" /></div>
  8. <div id="progress-div"><div id="progress-bar"></div></div>
  9. <div id="targetLayer"></div>
  10. </form>
  11. <div id="loader-icon" style="display:none;"><img src="loading.gif" /></div>

jQuery Script

This is the script for a progress bar, and it will be increased if the progress completed.

  1. <script src="js/code_js.js" type="text/javascript"></script>
  2.  
  3. <script src="js/code_js1.js" type="text/javascript"></script>
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7. $('#upload_container').submit(function(e) {
  8. if($('#userImage').val()) {
  9. e.preventDefault();
  10. $('#loader-icon').show();
  11. $(this).ajaxSubmit({
  12. target: '#targetLayer',
  13. beforeSubmit: function() {
  14. $("#progress-bar").width('0%');
  15. },
  16. uploadProgress: function (event, position, total, percentComplete){
  17. $("#progress-bar").width(percentComplete + '%');
  18. $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
  19. },
  20. success:function (){
  21. $('#loader-icon').hide();
  22. },
  23. resetForm: true
  24. });
  25. return false;
  26. }
  27. });
  28. });
  29. </script>

And, this is the output.

Output

For my next tutorial, we are going to create a multiple image upload.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.