Please go through the following steps to implement PHP with Ajax multiple file upload.
Step 1: Create a file called index.php and add below codes
<html>
<head>
<title>AJAX Multi Images Upload in PHP </title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#imguploadform").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(){}
});
}));
});
</script>
</head>
<body>
<div class="gallery-bg">
<form id="imguploadform" action="upload.php" method="post">
<div id="gallery"></div>
<div id="uploadFormLayer">
<p class="txt-subtitle">Select Multiple Files:</p>
<p><input name="userImage[]" type="file" multiple/><p><!--
<p><input name="userImage[]" type="file"/><p>
<p><input name="userImage[]" type="file"/><p> -->
<p><input type="submit" value="Submit" class="btnUpload" /><p>
</div>
</form>
</div>
</body>
</html>
Step 2: First create folder called “images”, and then create 2nd file called upload.php
<?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)) {
}
}
}
echo "Upload Successfull";
}
?>
Click here for github file Repository
Arjun is a Full-stack developer, who is fond of the web. Lives in Chikmagalur, Karnataka, India
