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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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 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 :


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.   Difference between two dates in years, months, days in PHP
  2.   how to use php in javascript? - Example | php code in javascript
  3.   Laravel dynamic breadcrumbs with links
  4.   PayPal Payment Gateway with PHP MySQL Database
  5.   Node.js Sending Email Nodemailer Tutorial
  6.   PHP Laravel Inline CRUD Using jQuery and AJAX
  7.   Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP
  8.   Vuejs json Custom Filter example
  9.   PHP Laravel Eloquent join with subquery
  10.   Controller Function using Angular Example