The image upload function is widely used in web applications and can be easily implemented using PHP. However, if you want to implement the image upload feature without page refreshing, jQuery and Ajax for PHP are required. Uploading images without refreshing the page provides a user friendly interface for web applications. Uploading Ajax files allows users to upload images without reloading or refreshing the current page. upload single image & display using jquery AJAX in PHP MYSQL
Usually the input fields upload one image at a time. However, in some cases, your web application requires you to allow users to upload multiple images at once. In this post we will show you how to upload multiple images without refreshing the page using jQuery, Ajax and PHP. Multiple image uploading allows users to select multiple image files simultaneously and upload all images to the server with one click.Upload image in database using jQuery AJAX in PHP Mysql
The sample code allows you to upload multiple images simultaneously without refreshing the page using jQuery, Ajax, and PHP. Makes it easy to upload multiple images without refreshing the page. There are two ways to view uploaded images. You can view uploaded images with or without being saved in the server directory.
Create HTML Code for Upload Multiple Files Form
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to upload multiple image using jquery ajax in PHP MYSQL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>How to upload multiple image using jquery ajax in PHP MYSQL</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form id="submitForm">
<div class="form-group">
<label for="multipleFile">Choose Multiple Images to Upload:</label>
<input type="file" class="form-control" name="multipleFile[]" id="multipleFile" required="" multiple>
</div>
<div class="form-group">
<button type="submit" name="upload" class="btn btn-primary btn btn-block">Upload</button>
</div>
</form>
</div>
</div>
<!-- gallery view of uploaded images -->
<div id="gallery"></div>
</div>
</body>
</html>
jQuery AJAX Code Upload Multiple Images
<script type="text/javascript">
$(document).ready(function(){
$("#submitForm").on("submit", function(e){
e.preventDefault();
var image = $("#multipleFile").val();
$.ajax({
url : "upload.php",
type :"POST",
cache:false,
contentType : false, // you can also use multipart/form-data replace of false
processData : false,
data: new FormData(this),
success:function(response){
var image = $("#multipleFile").val("");
$("#gallery").html(response);
}
});
});
});
</script>
Upload Multiple Images with PHP
upload.php
<?php
// upload file using move_uploaded_file function in php
if (!empty($_FILES['multipleFile']['name'])) {
$multiplefile = $_FILES['multipleFile']['name'];
foreach ($multiplefile as $name => $value) {
$allowImg = array('png','jpeg','jpg','');
$fileExnt = explode('.', $multiplefile[$name]);
if (in_array($fileExnt[1], $allowImg)) {
if ($_FILES['multipleFile']['size'][$name] > 0 && $_FILES['multipleFile']['error'][$name]== 0) {
$fileTmp = $_FILES['multipleFile']['tmp_name'][$name];
$newFile = rand(). '.'. $fileExnt[1];
$target_dir = 'uploads/'.$newFile;
if (move_uploaded_file($fileTmp, $target_dir)) {
echo '<img src="'.$target_dir.'" class="img-thumbnail" width="220px" height="220px"/>';
}else{
echo "Image is not uploaded try again!";
}
}
}
}
}
?>
Output
You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions / problems about this tutorial, please comment on the form below.😊
