jQuery AJAX Multiple Files Upload using PHP

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.

Read Also:  How to calculate the difference between two dates using PHP?

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 :

Read Also:  Dynamically Upload Multiple Images Using PHP and jQuery

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.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *