HANUMANIT
/
kokjan
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
kokjan/vendor/kartik-v/bootstrap-fileinput/examples/index-bs3.html

285 lines
12 KiB
HTML
Raw Normal View History

first commit
2026-02-25 06:59:34 +00:00
<!--
style: reduce font size of statistics table in footer
2026-02-27 00:03:00 +00:00
* bootstrap-fileinput v5.5.4
first commit
2026-02-25 06:59:34 +00:00
* http://plugins.krajee.com/file-input
*
* Author: Kartik Visweswaran
style: reduce font size of statistics table in footer
2026-02-27 00:03:00 +00:00
* Copyright: 2014 - 2024, Kartik Visweswaran, Krajee.com
first commit
2026-02-25 06:59:34 +00:00
*
* Licensed under the BSD-3-Clause
* https://github.com/kartik-v/bootstrap-fileinput/blob/master/LICENSE.md
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Krajee JQuery Plugins - &copy; Kartik</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
<link href="../themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="../js/plugins/buffer.min.js" type="text/javascript"></script>
<script src="../js/plugins/filetype.min.js" type="text/javascript"></script>
<script src="../js/plugins/piexif.js" type="text/javascript"></script>
<script src="../js/plugins/sortable.js" type="text/javascript"></script>
<script src="../js/fileinput.js" type="text/javascript"></script>
<script src="../js/locales/fr.js" type="text/javascript"></script>
<script src="../js/locales/es.js" type="text/javascript"></script>
<script src="../themes/gly/theme.js" type="text/javascript"></script>
<script src="../themes/fa5/theme.js" type="text/javascript"></script>
<script src="../themes/explorer-fa5/theme.js" type="text/javascript"></script>
<script>$.fn.fileinput.defaults.theme = 'gly';</script>
</head>
<body>
<div class="container my-4">
<h1>Bootstrap File Input Examples
<small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i
class="glyphicon glyphicon-download"></i> Download Sample Files</a></small>
</h1>
<h4>Bootstrap Version: <script>document.write($.fn.fileinputBsVersion);</script></h4>
<hr>
<form enctype="multipart/form-data">
<div class="file-loading">
<input id="kv-explorer" type="file" multiple>
</div>
<br>
<div class="file-loading">
<input id="file-0a" class="file" type="file" multiple data-min-file-count="1" data-theme="fa5">
</div>
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-outline-secondary">Reset</button>
</form>
<hr>
<h5>Preupload Validation</h5>
<input id="file-0" name="file-0" type="file">
<br>
<textarea id="description" rows=3" class="form-control" placeholder="Enter description for the files selected..."></textarea>
<br>
<form enctype="multipart/form-data">
<label for="file-0b">Test invalid input type</label>
<div class="file-loading">
<input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
</div>
<script>
$(document).on('ready', function () {
$("#file-0b").fileinput();
});
</script>
</form>
<hr>
<form enctype="multipart/form-data">
<div class="file-loading">
<input id="file-0c" class="file" type="file" multiple data-min-file-count="3" data-theme="gly">
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-0d" class="file" type="file">
</div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" data-theme="fa5">
</div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-2" type="file" class="file" readonly data-show-upload="false" data-theme="fa5">
</div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<label>Preview File Icon</label>
<input id="file-3" type="file" multiple>
</div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-4" type="file" class="file" data-upload-url="#" data-theme="fa5">
</div>
</div>
<hr>
<div class="form-group">
<button class="btn btn-warning" type="button">Disable Test</button>
<button class="btn btn-info" type="reset">Refresh Test</button>
<button class="btn btn-primary">Submit</button>
<button class="btn btn-outline-secondary" type="reset">Reset</button>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input type="file" class="file" id="test-upload" multiple data-theme="fa5">
</div>
<div id="errorBlock" class="help-block"></div>
</div>
<hr>
<div class="form-group">
<div class="file-loading">
<input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-theme="fa5">
</div>
</div>
</form>
<hr>
<h4>Multi Language Inputs</h4>
<form enctype="multipart/form-data">
<label>French Input</label>
<div class="file-loading">
<input id="file-fr" name="file-fr[]" type="file" multiple>
</div>
<hr style="border: 2px dotted">
<label>Spanish Input</label>
<div class="file-loading">
<input id="file-es" name="file-es[]" type="file" multiple>
</div>
</form>
<hr>
<h4>Test <code>addToStack</code></h4>
<label>Select file below which will automatically be added to the plugin preview later</label>
<div class="input-group mb-3">
<input type="file" class="form-control" id="inp-add-1">
</div>
<hr>
<input type="file" id="inp-add-2" name="inp-add-2" multiple>
<br>
</div>
</body>
<script>
$('#file-fr').fileinput({
theme: 'fa5',
language: 'fr',
uploadUrl: '#',
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$('#file-es').fileinput({
theme: 'fa5',
language: 'es',
uploadUrl: '#',
allowedFileExtensions: ['jpg', 'png', 'gif']
});
$("#file-0").fileinput({
theme: 'fa5',
uploadUrl: '#'
}).on('filepreupload', function(event, data, previewId, index) {
alert('The description entered is:\n\n' + ($('#description').val() || ' NULL'));
});
$("#file-1").fileinput({
theme: 'fa5',
uploadUrl: '#', // you must set a valid URL here else you will get an error
allowedFileExtensions: ['jpg', 'png', 'gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
/*
$(".file").on('fileselect', function(event, n, l) {
alert('File Selected. Name: ' + l + ', Num: ' + n);
});
*/
$("#file-3").fileinput({
theme: 'fa5',
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary btn-lg",
fileType: "any",
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
overwriteInitial: false,
initialPreviewAsData: true,
initialPreview: [
"http://lorempixel.com/1920/1080/transport/1",
"http://lorempixel.com/1920/1080/transport/2",
"http://lorempixel.com/1920/1080/transport/3"
],
initialPreviewConfig: [
{caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
{caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
{caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
]
});
$("#file-4").fileinput({
theme: 'fa5',
uploadExtraData: {kvId: '10'}
});
$(".btn-warning").on('click', function () {
var $el = $("#file-4");
if ($el.attr('disabled')) {
$el.fileinput('enable');
} else {
$el.fileinput('disable');
}
});
$(".btn-info").on('click', function () {
$("#file-4").fileinput('refresh', {previewClass: 'bg-info'});
});
/*
$('#file-4').on('fileselectnone', function() {
alert('Huh! You selected no files.');
});
$('#file-4').on('filebrowse', function() {
alert('File browse clicked for #file-4');
});
*/
$(document).ready(function () {
$("#test-upload").fileinput({
'theme': 'fa5',
'showPreview': false,
'allowedFileExtensions': ['jpg', 'png', 'gif'],
'elErrorContainer': '#errorBlock'
});
$("#kv-explorer").fileinput({
'theme': 'explorer-fa5',
'uploadUrl': '#',
overwriteInitial: false,
initialPreviewAsData: true,
initialPreview: [
"http://lorempixel.com/1920/1080/nature/1",
"http://lorempixel.com/1920/1080/nature/2",
"http://lorempixel.com/1920/1080/nature/3"
],
initialPreviewConfig: [
{caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
{caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
{caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
]
});
/*
$("#test-upload").on('fileloaded', function(event, file, previewId, index) {
alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
});
*/
$('#inp-add-1').on('change', function() {
var $plugin = $('#inp-add-2').data('fileinput');
$plugin.addToStack($(this)[0].files[0])
});
$('#inp-add-2').fileinput({
uploadUrl: '#',
//uploadUrl: 'http://localhost/plugins/test-upload',
initialPreviewAsData: true,
initialPreview: [
"https://dummyimage.com/640x360/a0f.png&text=Transport+1",
"https://dummyimage.com/640x360/3a8.png&text=Transport+2",
"https://dummyimage.com/640x360/6ff.png&text=Transport+3"
],
initialPreviewConfig: [
{caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1, zoomData: 'https://dummyimage.com/1920x1080/a0f.png&text=Transport+1', description: '<h5>NUMBER 1</h5> The first choice for transport. This is the future.'},
{caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2, zoomData: 'https://dummyimage.com/1920x1080/3a8.png&text=Transport+2', description: '<h5>NUMBER 2</h5> The second choice for transport. This is the future.'},
{caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3, zoomData: 'https://dummyimage.com/1920x1080/6ff.png&text=Transport+3', description: '<h5>NUMBER 3</h5> The third choice for transport. This is the future.'}
]
});
});
</script>
</html>