Multiple File Uploads with Progress Bar using JavaScript in PHP

Submitted by: 
Language: 
Visitors have accessed this post 9095 times.

If you are looking for Multiple File Uploads with Progress Bar using JavaScript in PHP then you are at the right place. This simple project, we are going to upload multiple files in one input file element. We are going to use Ajax, jQuery, and PHP to create this simple project. After selecting multiple files it will display on the table before uploading the multiple files.

Related Code: Upload File

Creating one input file element to upload multiple files and table where displaying our file uploading as you can see in the image below.

Result

Here's the simple source code for the image above.

  1.  
  2. <h2 style="color:blue; text-align:center;">Multiple Files Upload</h2>
  3.  
  4. <form name="form_id" id="form_id" action="javascript:void(0);" enctype="multipart/form-data" style="width:800px; margin-top:20px;">
  5. <input type="file" name="vasplus_multiple_files" id="vasplus_multiple_files" multiple="multiple" style="padding:5px;"/>
  6. <input type="submit" value="Upload" style="padding:5px;"/>
  7. </form>
  8.  
  9. <table class="table table-striped table-bordered" style="width:60%;" id="add_files">
  10. <tr>
  11. <th style="color:blue; text-align:center;">File Name</th>
  12. <th style="color:blue; text-align:center;">Status</th>
  13. <th style="color:blue; text-align:center;">File Size</th>
  14. <th style="color:blue; text-align:center;">Action</th>
  15. <tr>
  16. </thead>
  17.  
  18. </tbody>
  19.  

In the image below, as we can see the completed file, ready to upload, and uploading files.

Result

Related Code: Upload File

Kindly click the "Download Code" button below for full source code. Thank you very much.

Hope that this tutorial will help you a lot.

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.


Comments

Hi, thanks for good code,but how can I use this code to save files data to Mysql Databse/.Data like filenames,size,type

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.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.