Do you want to be a good Web Developer?

Enter Your Email To Get Our Exclusive Tutorials
And Offer Right In Your Email

Join TalkersCode Community And Recieve Exclusive Tutorials
On Web Development Right Via Email.

Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

Wednesday, Jan 11, 2017

Tags:- jQuery Ajax PHP


In this tutorial we will show you how to upload multiple images with image preview using jQuery Ajax and PHP.We use jQuery and jQuery Form Plugin which helps in uploading images to server.You may also like upload image without page refresh using ajax and PHP.


See Demo
Upload Mutiple Images With Image Preview Using jQuery,Ajax And PHP


To Upload Multiple Images With Image Preview It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file to upload images


Step 1.Make a HTML file and define markup and scripting

We make a HTML file and save it with a name upload.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
$(document).ready(function() 
{ 
 $('form').ajaxForm(function() 
 {
  alert("Uploaded SuccessFully");
 }); 
});

function preview_image() 
{
 var total_file=document.getElementById("upload_file").files.length;
 for(var i=0;i<total_file;i++)
 {
  $('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'><br>");
 }
}
</script>
</head>
<body>
<div id="wrapper">
 <form action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" id="upload_file" name="upload_file[]" onchange="preview_image();" multiple/>
  <input type="submit" name='submit_image' value="Upload Image"/>
 </form>
 <div id="image_preview"></div>
</div>
</body>
</html>

In this step we create a form to upload and preview multiple images then we create a file tag and add 'multiple' it allows to select multiple images and attach onchange event to call preview_image() function to preview all the images after user select the images.We include jQuery and jQuery Form Plugin to upload the images then we use document.ready function to call ajaxForm so that whenever the user clicks on submit button all the images will be uploaded to server and then alert the user for 'SuccessFully Upload'.You may also like drag and drop image upload using jQuery and PHP.

In preview_image() function we first get how many images selected then we use for loop to preview the images one by one using createObjectURL function of javascript.



Step 2.Make a PHP file to upload images

We make a PHP file and save it with a name upload_file.php

<?php
if(isset($_POST['submit_image']))
{
for($i=0;$i<count($_FILES["upload_file"]["name"]);$i++)
{
 $uploadfile=$_FILES["upload_file"]["tmp_name"][$i];
 $folder="images/";
 move_uploaded_file($_FILES["upload_file"]["tmp_name"][$i], "$folder".$_FILES["upload_file"]["name"][$i]);
}
exit();
}
?>

In this step we use for loop to upload all the images in images folder using move_uploaded_file() function.You may also like upload image from url using PHP.


Thats all, this is how to upload multiple images with image preview using jQuery,Ajax And PHP.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email