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.

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>    
                <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>
                    </span>
                    <input type="submit"   value="Upload Files">
                </form>            
                
            </div>

Step 2: PHP Source code

And then create a PHP code:

<?php

$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>
    <style>
        /* 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;}
    </style>

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

    </script>
<script>
	(function() {

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

		$('form').ajaxForm({
			beforeSend: function() {
				status.empty();
				var total_display_progress_barage_data = '0%';
				bar.width(total_display_progress_barage_data)
				display_progress_bar.html(total_display_progress_barage_data);
			},
			uploadProgress: function(event, position, total, display_progress_barComplete) {
				var total_display_progress_barage_data = display_progress_barComplete + '%';
				bar.width(total_display_progress_barage_data)
				display_progress_bar.html(total_display_progress_barage_data);

			},
			success: function() {
				var total_display_progress_barage_data = '100%';
				bar.width(total_display_progress_barage_data)
				display_progress_bar.html(total_percentage_data);
			},
			complete: function(xhr) {
				status.html(xhr.responseText);
			}
		});
	})();
</script>

Web Programming Tutorials Example with Demo

Read :

Summary

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.   Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP
  2.   Multilevel and Multiple inheritance in PHP
  3.   Convert Json String to Array in VueJS
  4.   Most Useful Laravel String Functions(helpers)
  5.   Event binding on dynamically created elements?
  6.   Ajax Shopping Cart PHP MYSQLi Tutorial With Example
  7.   jQuery Ajax File Upload images using PHP MySQLi
  8.   how to use php in javascript? - Example | php code in javascript
  9.   Count Multiple Files using jQuery Example
  10.   DataTables Column Search Server side processing in PHP