Posted inTechnology / Ajax / JavaScript / jQuery / Laravel / Mysql / Mysqli / php / Programming

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

[html]

Multiple images upload using jQuery, Ajax and PHP : Pakainfo.com

$(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();
});
});


PHP Multiple images upload using jQuery Ajax


Solution of AngularJs All Problems For Pakainfo.com

My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of Pakainfo.com

[/html]

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

[html]

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;}

[/html]

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.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype