May 08, 2024 | PHP jQuery Ajax
Hello Dev,
Today, I'd like to walk you through the process of implementing multiple image upload with preview using jQuery AJAX in PHP. This tutorial aims to provide a clear understanding of how to accomplish jQuery AJAX multiple images upload in PHP, along with a demonstration of displaying selected multiple images preview.
Occasionally, we may encounter the need to incorporate a feature for multiple image uploads. If you're new to core PHP or unsure about how to proceed, you've come to the right place. I'll present a complete example of multiple images upload with the display preview of selected images. So, let's dive in and take a look at the two essential files:
1. index.php
2. uploadFile.php
In the index file, I've included the code for the design and jQuery AJAX functionality. Upon clicking the submit button, all selected images will be uploaded to the "media" folder. Therefore, it's essential to create a "media" folder in your root directory. This example is concise and straightforward.
The code snippet below demonstrates how to display selected images preview:
By following this approach, you'll be equipped to handle multiple image uploads with ease and enhance the user experience by providing a preview of the selected images. Let's proceed with the implementation.
To implement multiple image upload with preview using jQuery AJAX in PHP, follow these steps:
Read Also: Laravel Ajax File Upload With Progress Bar Example Tutorial Step 1: Create the HTML FormFirst, create an HTML form that allows users to select multiple images. Ensure the form includes the enctype="multipart/form-data" attribute, which is necessary for uploading files.
<!DOCTYPE html>
<html>
<head>
<title>Ajax Multiple Image Upload Jquery PHP Example Tutorial -- ItErrorSolution.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ajax Multiple Image Upload Jquery PHP Example Tutorial -- ItErrorSolution.com</h1>
<form action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
<input type="submit" class="btn btn-success" name='submitImage' value="Upload Images"/>
</form>
<div id="image_preview"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<script>
$(document).ready(function(){
$("#uploadFile").change(function(){
$('#image_preview').html("");
var total_files = document.getElementById("uploadFile").files.length;
for(var i = 0; i < total_files; i++){
$('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
}
});
$('form').ajaxForm({
target: '#image_preview',
beforeSubmit: function() {
$('#image_preview').html('<img src="loading.gif"/>');
},
success: function() {
$('#image_preview').html('');
},
error: function() {
$('#image_preview').html('<p>Upload failed Please try again.</p>');
}
});
});
</script>
</body>
</html>
Read Also: Jquery Email Address Autocomplete Example Tutorial
Step 2: Process the Upload in PHP
Next, create a PHP script (uploadFile.php) to handle the file upload. This script will move the uploaded files to a specified directory and display a success message.
<?php
if(isset($_POST['submitImage'])){
for($i=0; $i<count($_FILES["uploadFile"]["name"]); $i++){
$uploadfile = $_FILES["uploadFile"]["tmp_name"][$i];
$folder = "media/";
move_uploaded_file($_FILES["uploadFile"]["tmp_name"][$i], "$folder".$_FILES["uploadFile"]["name"][$i]);
}
echo "Images uploaded successfully!";
}
?>
Step 3: Prepare the Environment
Ensure you have a directory named media in your project's root directory where the uploaded images will be stored.
Step 4: Test the ApplicationRun your PHP application and navigate to the page where the form is located. Select multiple images and click the "Upload Images" button. The selected images should be uploaded to the media directory, and a preview of the images should be displayed on the page.
This example demonstrates how to upload multiple images with a preview using jQuery AJAX in PHP. The form submission is handled asynchronously, providing a smoother user experience by avoiding page reloads.
Output:
Thank you for your encouragement! If you have any questions or need further assistance, feel free to ask. I'm here to help!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"