✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

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

Last Updated : Jul 1, 2023

IN - jQuery Ajax PHP | Written & Updated By - Riya

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.

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

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on upload image using jquery and php and preview image before upload using jquery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪