Upload multiple images using Ajax
index.html<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadF").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="uploadF" action="" method="post">
<div id="gallery">No Images in Gallery</div>
<div id="uploadFormLayer">
<p class="txt-subtitle">Upload Multiple Image:</p>
<!-- <p><input name="userImage" type="file" class="inputFile" /><p>-->
<p><input name="userImage[]" type="file" /><p>
<p><input name="userImage[]" type="file" /><p>
<p><button id="Submit" value="Submit" name="Submit">Submit</button><p>
</div>
</form>
<input type="submit" value="Submit" />
</div>
</body>
</html>
upload.php
<?php
if(is_array($_FILES))
{
foreach ($_FILES['userImage']['name'] as $name => $value)
{
if(is_uploaded_file($_FILES['userImage']['tmp_name']))
{
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "images/".$_FILES['userImage']['name'];
if(move_uploaded_file($sourcePath,$targetPath))
{
?>
<img src="<?php echo $targetPath; ?>" width="150px" height="180px" />
<?php
}
}
}
}
?>
