Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP
Last Updated : Apr 15, 2022
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.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Upload Multiple Images With Image Preview It Takes Only Two Steps:-
- Make a HTML file and define markup and scripting
- 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.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery