In this tutorial I will show you how to upload multiple Images without page refresh with PHP Jquery and Ajax. Using this code you can upload multiple images without page refresh with the help of PHP Jquery and Ajax. Once Images will be uploaded they will be immediately display on the web page without page refresh.
Source Code
multiple_file_upload.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Multiple Image Upload</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<form id="uploadForm" action="upload.php" method="post">
<div id="gallery"></div><div style="clear:both;"></div><br /><br />
<div class="col-md-4" align="right">
<label>Upload Multiple Image</label>
</div>
<div class="col-md-4">
<input name="files[]" type="file" multiple />
</div>
<div class="col-md-4">
<input type="submit" value="Submit" />
</div>
<div style="clear:both"></div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#uploadForm').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "upload1.php",
type: "POST",
data: new FormData(this),
contentType: false,
processData:false,
success: function(data)
{
$("#gallery").html(data);
alert("Image Uploaded");
}
});
});
});
</script>
upload.php
<?php
//upload.php
$output = '';
if(is_array($_FILES))
{
foreach ($_FILES['files']['name'] as $name => $value)
{
$file_name = explode(".", $_FILES['files']['name'][$name]);
$allowed_ext = array("jpg", "jpeg", "png", "gif");
if(in_array($file_name[1], $allowed_ext))
{
$new_name = md5(rand()) . '.' . $file_name[1];
$sourcePath = $_FILES['files']['tmp_name'][$name];
$targetPath = "upload/".$new_name;
if(move_uploaded_file($sourcePath, $targetPath))
{
$output .= '<img src="'.$targetPath.'" width="150px" height="180px" />';
}
}
}
echo $output;
}
?>
0 comments:
Post a Comment