PHP Multiple images upload using jQuery Ajax

PHP Multiple images upload using jQuery Ajax

Today, We want to share with you PHP Multiple images upload using jQuery Ajax.
In this post we will show you Multiple images upload using jQuery, Ajax and PHP, hear for PHP AJAX Multiple Image Upload using jQuery we will give you demo and example for implement.
In this post, we will learn about Upload Multiple Images using jQuery, Ajax and PHP with an example.

index.html



<title>Multiple images upload using jQuery, Ajax and PHP : Pakainfo.com</title>




$(document).ready(function(){
	$('#allimages_data').on('change',function(){
		$('#images_multipleform').ajaxForm({
			target:'#display_images_preview',
			beforeSubmit:function(e){
				$('.uploading').show(); //all images display
			},
			success:function(e){
				$('.uploading').hide(); //hide first images
			},
			error:function(e){
			}
		}).submit();
	});
});




<div style="margin-top:20px">
	<div class="upload_div">
    <form method="post" name="images_multipleform" id="images_multipleform" enctype="multipart/form-data" action="do_upload_data.php" class="well">
    	
            <label>Please local system choose Image</label>
            
        <div class="uploading none">
            <label> </label>
            <img src="images/uploading.gif" />
        </div>
    </form>
    </div>
	
    <div class="gallery" id="display_images_preview"></div>
</div>

<hr />

<h1>Solution of AngularJs All Problems For Pakainfo.com</h1>
<h3>
<a href="https://www.pakainfo.com/">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of Pakainfo.com </a>
</h3>

	

do_upload_data.php

$val){
		$image_name = $_FILES['allimages']['name'][$key];
		$tmp_name 	= $_FILES['allimages']['tmp_name'][$key];
		$size 		= $_FILES['allimages']['size'][$key];
		$type 		= $_FILES['allimages']['type'][$key];
		$error 		= $_FILES['allimages']['error'][$key];

		$store_target_dir = "uploads/";
		$store_target_file_images = $store_target_dir.$_FILES['allimages']['name'][$key];
		//all multiple images uploded here move uploads folder
		if(move_uploaded_file($_FILES['allimages']['tmp_name'][$key],$store_target_file_images)){
			$allimages_arr[] = $store_target_file_images;
		}
	}
}
?>

style.css

ul, ol, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.gallery{ width:100%; float:left; margin-top:30px;}
.gallery ul{ margin:0; padding:0; list-style-type:none;}
.gallery ul li{ padding:7px; border:2px solid #ccc; float:left; margin:10px 7px; background:none; width:auto; height:auto;}
.gallery img{ width:250px;}
.none{ display:none;}
.upload_div{ margin-bottom:50px;}
.uploading{ margin-top:15px;}


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel AJAX Live Autocomplete Search from Database
  2.   Role based access control using Laravel 5.7 Example
  3.   jQuery Ajax Login Script using PHP MySQLi
  4.   Merge Multiple PHP JSON Array Merge into one array
  5.   Laravel JOIN Multiple Tables Eloquent Relationships
  6.   Get Query String Parameters from URL using JQuery
  7.   Angularjs Bootstrap Progress Bars Example
  8.   Date filtering and formatting in VueJS with Example
  9.   Remove HTML Table Row and Column using jQuery
  10.   PHP GET Base URL Absolute Path Example