Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.7/css/fileinput.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.3.7/js/fileinput.js"></script>
<input id="input-pd" name="input-pd[]" type="file" multiple class="file-loading">
JavaScript
$("#input-pd").fileinput({
uploadUrl: "/file-upload-batch/1",
uploadAsync: false,
minFileCount: 2,
maxFileCount: 2,
overwriteInitial: false,
initialPreview: [
// IMAGE DATA
"http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",
// IMAGE DATA
"http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg"
],
initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
initialPreviewFileType: 'image', // image is the default and can be overridden in config below
purifyHtml: true, // this by default purifies HTML data for preview
uploadExtraData: {
img_key: "1000",
img_keywords: "happy, places",
}
}).on('filesorted', function(e, params) {
console.log('File sorted params', params);
}).on('fileuploaded', function(e, params) {
console.log('File uploaded params', params);
});
$('#input-pd').on('change', function(event) {
$('#input-pd').fileinput('clear');
$('#input-pd').fileinput('reset');
//$('#input-edit').fileinput('refresh');
});