In this tutorial, we will learn How to Upload Multiple Images using Ajax, jQuery, and PHP with an example.
Multiple Files Upload using jQuery Ajax and PHP
Contents
HTML
Creating a index.htmlfile.
Create a one file type input element, for selecting multiple files add multiple Attribute. also assigned a unique ID id="files" in it.
Create a button, assigned an id="upload" id attribute. Triggers AJAX call by clicking on this button.
<form method="post" enctype="multipart/form-data">
<input type="file" name="upload" id="files" multiple>
<button type="button" id="upload" name="uploadBtn"> Upload</button>
</form>
<div class='preview'>
</div>
jQuery
Create an FormData object and count total files are been selected.
Loop on the selected files and append them in form_data.
On AJAX successful callback, we render uploaded images on the frontend, for that we loop on the response to get the file path and Append it in <div class='preview' > element with <img > element.
Multiple Files upload using Ajax jQuery- Script
<script type="text/javascript">
$('#upload').on('click', function(e) {
e.preventDefault();
var form_data = new FormData();
// Read selected files
var totalFiles = document.getElementById('files').files.length;
for (var i = 0; i < totalFiles; i++) {
form_data.append("files[]", document.getElementById('files').files[i]);
}
$.ajax({
url: 'ajaxfile.php', // <-- point to server-side PHP script
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(response) {
const filesArray = JSON.parse(response);
for (var index = 0; index < filesArray.length; index++) {
var src = filesArray[index];
// Add img element in <div class='preview'>
$('.preview').append('<img src="' + src + '" width="200px;" height="200px">');
}
}
});
});
</script>
PHP
Create a ajaxfile.php file and a uploads directory to store files.
First, we Count the total files, Loop on the files.
Then we initialize $valid_ext Array with valid image extensions.
Check if the file extension exists in $valid_ext Array. If it exists then upload the file and initialize $files_arr Array with $path.
Return $files_arr in JSON format for rendering uploaded images on the frontend.
// Count total files
$countFiles = count($_FILES['files']['name']);
// Upload directory
$upload_location = "upload/";
// To store uploaded files path
$files_arr = array();
//Loop through each file
for ($i = 0; $i < $countFiles; $i++) {
if (isset($_FILES['files']['name'][$i]) && $_FILES['files']['name'][$i] != '') {
// Get the file name
$filename = $_FILES['files']['name'][$i];
// Get extension
$ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
// Valid image extension
$valid_ext = array("png", "jpeg", "jpg");
// Check extension
if (in_array($ext, $valid_ext)) {
// Setup The destination of the moved file.
$path = $upload_location . $filename;
// Upload file
if (move_uploaded_file($_FILES['files']['tmp_name'][$i], $path)) {
$files_arr[] = $path;
}
}
}
}
echo json_encode($files_arr);
Be First to Comment