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

Contents

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 :

Also Read This 👉 Same Scope Variable in Multiple Controllers using Angular Example

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.