11-Apr-2023
.
Admin
Hi Guys,
Today, I would like to share with you how to upload multiple image using ajax jquery in php. multple image uplaod without page refresh using jquery ajax in php.
This Tutorial will help to learn JQuery Ajax multiple images upload example in PHP with demo. demo of display selected multiple images preview.we will show you how to upload multiple images without page refresh using jQuery, Ajax, and PHP. Ajax multiple image upload allows the user to select multiple image files at once and upload all the images to the folder in a single click.
We will have multiple file input options in a form. Images to be uploaded will be chosen using those input fields. Then using jQuery AJAX the multiple images will be uploaded to the backend code.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Multiple Image Upload Using JQuery Ajax In PHP - NiceSnippets.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="showimages"></div>
</div>
<div class="col-md-6 offset-3 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">Multiple Image Upload Using JQuery Ajax In PHP - NiceSnippets.com</h6>
</div>
<div class="card-body">
<form class="image-upload" method="post" action="" enctype="multipart/form-data">
<div class="form-group">
<label><strong>Image :</strong></label>
<input type="file" name="images[]" multiple="multiple" class="form-control">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success btn-sm">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.image-upload').on('submit', function(e){
e.preventDefault();
$.ajax({
url : "upload.php",
type : "post",
data : new FormData(this),
contentType:false,
processData:false,
success: function(data){
$("#showimages").html(data);
alert(data);
}
});
});
});
</script>
</body>
</html>
upload.php
<?php
$output = '';
if(is_array($_FILES)){
foreach ($_FILES['images']['name'] as $key => $value) {
$file_name = explode(".", $_FILES['images']['name'][$key]);
$allowed_ext = array("jpg", "jpeg", "png", "gif");
if(in_array($file_name[1], $allowed_ext))
{
$new_name = time() . '.' . $file_name[1];
$sourcePath = $_FILES['images']['tmp_name'][$key];
$targetPath = "images/".$new_name;
if(move_uploaded_file($sourcePath, $targetPath))
{
$output .= '<img src="'.$targetPath.'" width="100px" height="100px" />';
}
}
}
echo $output;
}
?>
It will help you...
#PHP
#Jquery
