File Upload With Progress Bar Using PHP

Submitted by: 
Visitors have accessed this post 5731 times.

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>
  3. <script src="js/code_js1.js" type="text/javascript"></script>
  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.


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.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.