jQuery AJAX Multiple Files Upload using PHP

Today, We want to share with you jQuery AJAX Multiple Files Upload using PHP.In this post we will show you Multiple File Upload in PHP using JQuery AJAX, hear for how to send multiple files using formdata(jquery ajax) we will give you demo and example for implement.In this post, we will learn about Drag and drop Multiple files upload Using Ajax JQuery PHP and MySQL with an example.

jQuery AJAX Multiple Files Upload using PHP

There are the Following The simple About PHP AJAX Multiple Files Upload using jquery Full Information With Example and source code.

As I will cover this Post with live Working example to develop AJAX Image and File Upload in PHP with jQuery, so the Upload Multiple Images using jQuery, Ajax and PHP for this example is following below.

Read Also:  DataTables Pagination Server-side Processing using PHP and MySQL

Step 1: HTML source code

create a index.html HTML code:

<h3>How to upload multiple files using PHP, jQuery and AJAX?</h3>
     <div id='dv1'>
                <div class="panel">  <a href="javascript:void(0);" id="more_add_product">Add More File</a></div>
                <div class="progress">
                    <div class="bar"></div >
                    <div class="display_progress_bar">0%</div >
                <div id="status"></div>
                <form action="file.php" method="post" id='frm_upld' enctype="multipart/form-data">
                    <span id='spn_inputs'> 
                        <input type="file" name="product_catalog[]"><br>
                        <input type="file" name="product_catalog[]"><br>
                        <input type="file" name="product_catalog[]"><br>
                    <input type="submit"   value="Upload Files">

Step 2: PHP Source code

And then create a PHP code:


$upload_dir = "uploads/";

if (isset($_FILES["product_catalog"])) {
    $no_files = count($_FILES["product_catalog"]['name']);
    for ($i = 0; $i < $no_files; $i++) {

        if ($_FILES["product_catalog"]["error"][$i] > 0) {
            echo "Error: " . $_FILES["product_catalog"]["error"][$i] . "<br>";
        } else {
            $temp = explode(".", $_FILES["product_catalog"]["name"][$i]);
            $extension = end($temp);
                 move_uploaded_file($_FILES["product_catalog"]["tmp_name"][$i], $upload_dir . $_FILES["product_catalog"]["name"][$i]);
                echo "<br><font color='green'>".$_FILES["product_catalog"]["name"][$i] . " Uploaded Successfully.</font><br>";            

Step 3: Jquery and CSS:

JS for Uploader

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="jquery.form.js"></script>
        /* simple pakainfo.com CSS for Uploader */
        body { padding: 30px }
        form { display: block; margin: 20px 5px; background: #eee; border-radius: 10px; padding: 15px;width: 367px; }
        .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
        .bar { background-color: #66CCCC; width:0%; height:20px; border-radius: 3px; }
        .display_progress_bar { position:absolute; display:inline-block; top:3px; left:48%; color: #E6F7F7;}
        #more_add_product{background-color: #66CCCC; color: #FFF;padding: 7px;text-decoration: none; }
        .panel{margin-bottom: 25px;}

        /* simple javascript for Uploader */
        $(function() {
            /* Append More Input Files */
            $('#more_add_product').click(function() {
                $('#spn_inputs').append('<input type="file" name="product_catalog[]"><br>');

	(function() {

		var bar = $('.bar');
		var display_progress_bar = $('.display_progress_bar');
		var status = $('#status');

			beforeSend: function() {
				var total_display_progress_barage_data = '0%';
			uploadProgress: function(event, position, total, display_progress_barComplete) {
				var total_display_progress_barage_data = display_progress_barComplete + '%';

			success: function() {
				var total_display_progress_barage_data = '100%';
			complete: function(xhr) {

Web Programming Tutorials Example with Demo

Read :

Read Also:  jQuery Ajax Upload Multiple Images using PHP


You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple AJAX Multiple Files Upload using jQuery PHP.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Laravel Selecting and Aliasing Columns in Eloquent's query
  2. Read Also:  PHP Laravel 5.6 Image Upload with Validation Example
  3. Read Also:  DataTables Checkbox Check All Example
  4. Read Also:  jQuery Ajax Multiple File Upload Using PHP
  5. Read Also:  Simple Ajax Upload image using jQuery PHP
  6. Read Also:  PHP Dynamically Add Remove Images Upload using Ajax
  7. Read Also:  VueJS form v-on:submit example - Form Submit VueJS
  8. Read Also:  country drop down list - All Country State City
  9. Read Also:  Ajax Shopping Cart PHP MYSQLi Tutorial With Example
  10. Read Also:  Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP