Upload multiple images using jQuery, Ajax, PHP

We have received many requests from our readers on how to upload multiple images using jQuery, Ajax and PHP without refreshing the page or on fly. So, we have written the simple tutorial about multiple images upload using jQuery, Ajax and PHP. In this tutorial we have explained how can upload multiple images at once without page refresh using jQuery, Ajax and PHP also there implement a feature which is validation on file type. So my readers easily understand each and everything about this multiple image upload script.

This script is very short, easy and useful. Also you can easily implement this system at your web projects. Specially focused on newbies to understand the procedures of images uploading.

Take a quick look at this live demo to understand the flow of the Upload multiple images using jQuery, Ajax, PHP. Also you can download this script from here and can try in your localhost or live server where you want to do.

Upload multiple images using jquery ajax.

Let’s go with the live example step by step. First create the basic form for image upload.

//basic image upload form
<form method="post" name="upload_form" id="upload_form" enctype="multipart/form-data" action="upload.php">
    	<input type="hidden" name="form_submit" value="1"/>
            <label>Choose Image</label>
            <input type="file" name="images[]" id="upload-images" multiple >
            
        <div class="progress none">
            
            <img src="uploading.gif"/>
        </div>
        <input type="button" name="upload" id="upload" value="Upload">
    </form>

Now we have to create the jquery and ajax function to upload without page refresh using jquery, ajax and php. Below describe the code for this.

<script type="text/javascript">
$(document).ready(function(){
	$('#upload').on('click',function(){
		$('#upload_form').ajaxForm({
			target:'#preview',
			beforeSubmit:function(e){
				$('.progress').show();
			},
			success:function(e){
				$('.progress').hide();
			},
			error:function(e){
			}
		}).submit();
	});
});
</script>

After that we have to create upload.php for file uploading to uploads folder.

<?php
if($_POST['form_submit'] == 1)
{
	$images_arr = array();
	$error="";
	foreach($_FILES['images']['name'] as $key=>$val){
		$image_name = $_FILES['images']['name'][$key];
		$tmp_name 	= $_FILES['images']['tmp_name'][$key];
		
		//checking image type
		$allowed =  array('gif','png','jpg','jpeg','JPEG');
		$filename = $_FILES['images']['name'][$key];
		$ext = pathinfo($filename, PATHINFO_EXTENSION);
		
		if(in_array($ext,$allowed)){
		//move uploaded file to uploads folder
		$target_dir = "uploads/";
		$target_file = $target_dir.$_FILES['images']['name'][$key];
		if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
			$images_arr[] = $target_file;
		}
		}
		$error="Image type not valid";
		
	}
	
	// images view after upload
	
	if(!empty($images_arr)){ $count=0;
		foreach($images_arr as $image_src){ $count++?>
			<ul class="reorder_ul reorder-photos-list">
            	<li id="image_li_<?php echo $count; ?>" class="ui-sortable-handle">
                	<a href="javascript:void(0);" style="float:none;" class="image_link"><img src="<?php echo $image_src; ?>" alt=""></a>
               	</li>
          	</ul>
	<?php }
	}
	
}
?>

In this way we can upload multiple images using jquery, ajax, php. Thanks for watching this tutorial. You can try yourself and share with your friends. I will share some useful script in PHP as well as some tips and tricks in PHP programming. Viewers can subscribe our newsletter to get all the updates about web programming.

10 responses to “Upload multiple images using jQuery, Ajax, PHP”

  1. Vicki says:

    Very interesting content, your site can go viral.

  2. Feri Agusetiawan says:

    Sir, how to add remove button in preview images?

  3. Ayodele says:

    How can I insert all the uploaded images into database?

  4. Ayodele says:

    Alright. I appreciate your time. God bless you.

  5. Feri says:

    Ok bro, Thank you for reply 😀

  6. Jaydeep Jagani says:

    hello There,

    In the given example , it is over riding the previous HTML with the new HTML. But I dont want to override the previous HTML.So what to do ? Is there any Options Available ?

    I have searched and found one option like “replaceTarget” >> False. But it is not working. So please provide me some solution. I need it on urgent base if possible.

Leave a Reply

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