PHP Upload Multiple Files via AJAX using jQuery
by Vincy. Last modified on July 12th, 2022.
This tutorial describes how to upload multiple files via jQuery AJAX with PHP. It will be easy to follow this tutorial if you read a single image upload.
This example shows a form containing input to choose and upload multiple files. These fields push the uploaded files into an input array.
An AJAX function in jQuery serializes the form data and posts to the server. The server-side PHP script iterates $_FILES array to upload multiple files to a target.
The target can be a database or a folder to put the user’s uploaded files. Most applications have directories to upload files and store the path into the database. You may also upload the file binary into a database directly as a BLOB.
Multiple Input File
See the below screenshot shows the multiple files input in a HTML form. These file inputs have the name as userImage[]. It makes the array of file names, temporary source path and more with the PHP $_FILES[‘userImage’] array.
This code shows the HTML to display a simple form to choose multiple files to upload.
<form id="uploadForm" action="upload.php" method="post">
<div id="gallery">No Images in Gallery</div>
<div id="uploadFormLayer">
<p class="txt-subtitle">Upload Multiple Image:</p>
<p>
<input name="userImage[]" type="file" class="inputFile" />
</p>
<p>
<input name="userImage[]" type="file" class="inputFile" />
</p>
<p>
<input name="userImage[]" type="file" class="inputFile" />
</p>
<p>
<input type="submit" value="Submit" class="btnSubmit" />
</p>
</div>
</form>
Instead of having a fixed number of fields, we can have an ‘add more’ option to render more file inputs. Previously, we have seen to add dynamic text inputs into a form by clicking ‘add more’.
jQuery AJAX Call for Multiple Image Upload
If you read the PHP single file upload script, then this jQuery script will be familiar. There is no extra effort required to prepare AJAX for PHP upload multiple files example.
It calls AJAX on submitting the form. It posts the form data to the server with minimal code.
$("#uploadForm").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(data) {
$("#gallery").html(data);
},
error: function() { }
});
}));
Image File Iteration in PHP
On the server-side, the PHP upload multiple files script iterates the $_FILES array. The below code shows how to get the multiple files information and upload it.
This example uploads the files into a directory named images in the root. Make sure of the target path and permission to let this example run in your environment.
After successful upload, this PHP script prepares HTML to show the uploaded file’s preview. The AJAX success block will receive this HTML response and display it on the screen.
<?php
if (is_array($_FILES)) {
foreach ($_FILES['userImage']['name'] as $name => $value) {
if (is_uploaded_file($_FILES['userImage']['tmp_name'][$name])) {
$sourcePath = $_FILES['userImage']['tmp_name'][$name];
$targetPath = "images/" . $_FILES['userImage']['name'][$name];
if (move_uploaded_file($sourcePath, $targetPath)) {
?>
<img src="<?php echo $targetPath; ?>" width="150px" height="180px" />
<?php
}
}
}
}
?>
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.