ajax is an important part in web development. here i will share with you to upload multiple images with preview using bootstrap-fileinput in PHP. this tutorial covers steps to upload multiple images with preview and also upload with process so you can see how much is left.
Bootstrap fileinput is a bootstrap plugin. bootstrap-fileinput provide us to upload multiple images or file using dropzone js. bootstrap-fileinput is also use dropzone js for image upload. bootstrap-fileinput is super and amazing plugin.
So, let's create both file index.php and imageUpload.php file code. let's create both files.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
<style type="text/css">
.main-section{
margin:0 auto;
padding: 20px;
margin-top: 100px;
background-color: #fff;
box-shadow: 0px 0px 20px #c1c1c1;
}
.fileinput-remove,
.fileinput-upload{
display: none;
}
</style>
</head>
<body class="bg-danger">
<div class="container">
<div class="row">
<div class="col-lg-8 col-sm-12 col-11 main-section">
<h1 class="text-center text-danger">File Input Example</h1><br>
<div class="form-group">
<div class="file-loading">
<input id="file-1" type="file" name="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/themes/fa/theme.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("#file-1").fileinput({
theme: 'fa',
uploadUrl: "/imageUpload.php",
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize:2000,
maxFilesNum: 10,
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
</body>
</html>
imageUpload.php
<?php
if (!empty($_FILES['file'])) {
$target = "upload/". $_FILES["file"]["name"];
move_uploaded_file($_FILES['file']['tmp_name'], $target);
echo json_encode(['uploaded' => $target]);
} else {
echo json_encode(['error'=>'No files found for upload.']);
}
?>
make sure you need to create "upload" folder for store image.
You can see here demo on bellow button
I hope you found your best.....