We'll tell you how to upload multiple photos using jquery Ajax and Php. Using this code we upload many images without updating the page with the help of PHP, jquery and ajax.
AJAX means asynchronous javascript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.
Ajax can send and download data from a server without interrupting the display. therefore, here we use ajax.
You can see the following example below.
#index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery and PHP Tutorial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style> .showimages img{ padding-right:10px } </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="showimages"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<form id="multipleimage" name="multipleimage" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="email">Choose Multiple Images:</label>
<input name="images[]" type="file" multiple />
</div>
<button type="submit" value="Submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#multipleimage').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("Image Uploaded");
}
});
});
});
</script> #upload.php
<?php
$output = '';
if(is_array($_FILES))
{
foreach ($_FILES['images']['name'] as $name => $value)
{
$file_name = explode(".", $_FILES['images']['name'][$name]);
$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'][$name];
$targetPath = "images/".$new_name;
if(move_uploaded_file($sourcePath, $targetPath))
{
$output .= $targetPath;
}
}
}
echo $output;
}
?>
output:
