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

on
n 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.

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.

Comments

Post a Comment