HDTuto.com

Ajax multiple image upload using bootstrap-fileinput in PHP


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

See Demo Here

I hope you found your best.....






April 14, 2018 | Category : PHP Bootstrap JQuery JQuery Plugin Ajax
Related Posts