|
@@ -1,140 +1,130 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<!-- release v4.5.3, copyright 2014 - 2019 Kartik Visweswaran -->
|
|
|
+<!-- release v5.0.0, copyright 2014 - 2019 Kartik Visweswaran -->
|
|
|
<!--suppress JSUnresolvedLibraryURL -->
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
- <meta charset="UTF-8"/>
|
|
|
- <title>Krajee JQuery Plugins - © Kartik</title>
|
|
|
-
|
|
|
- <link rel="stylesheet"
|
|
|
- href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.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.5.0/css/all.css"
|
|
|
- crossorigin="anonymous">
|
|
|
- <link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
|
|
|
- <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
|
|
|
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"
|
|
|
- crossorigin="anonymous"></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/fas/theme.js" type="text/javascript"></script>
|
|
|
- <script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>
|
|
|
+ <meta charset="UTF-8"/>
|
|
|
+ <title>Krajee JQuery Plugins - © Kartik</title>
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.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.5.0/css/all.css" crossorigin="anonymous">
|
|
|
+ <link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
|
|
|
+ <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
|
|
|
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></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/fas/theme.js" type="text/javascript"></script>
|
|
|
+ <script src="../themes/explorer-fas/theme.js" type="text/javascript"></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>
|
|
|
- <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="fas">
|
|
|
- </div>
|
|
|
- <br>
|
|
|
- <button type="submit" class="btn btn-primary">Submit</button>
|
|
|
- <button type="reset" class="btn btn-outline-secondary">Reset</button>
|
|
|
- </form>
|
|
|
- <hr>
|
|
|
- <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" data-theme="fas">
|
|
|
- </div>
|
|
|
- <script>
|
|
|
+ <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>
|
|
|
+ <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="fas">
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <button type="submit" class="btn btn-primary">Submit</button>
|
|
|
+ <button type="reset" class="btn btn-outline-secondary">Reset</button>
|
|
|
+ </form>
|
|
|
+ <hr>
|
|
|
+ <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" data-theme="fas">
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
$(document).on('ready', function () {
|
|
|
- $('#file-0b').fileinput();
|
|
|
+ $("#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="fas">
|
|
|
- </div>
|
|
|
- <hr>
|
|
|
- <div class="form-group">
|
|
|
- <div class="file-loading">
|
|
|
- <input id="file-0d" class="file" type="file" data-theme="fas">
|
|
|
- </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="fas">
|
|
|
- </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="fas">
|
|
|
- </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="fas">
|
|
|
- </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="fas">
|
|
|
- </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="fas">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+ </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="fas">
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="file-loading">
|
|
|
+ <input id="file-0d" class="file" type="file" data-theme="fas">
|
|
|
+ </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="fas">
|
|
|
+ </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="fas">
|
|
|
+ </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="fas">
|
|
|
+ </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="fas">
|
|
|
+ </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="fas">
|
|
|
+ </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>
|
|
|
- <br>
|
|
|
+ <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>
|
|
|
+ <br>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script>
|
|
@@ -150,11 +140,11 @@
|
|
|
uploadUrl: '#',
|
|
|
allowedFileExtensions: ['jpg', 'png', 'gif']
|
|
|
});
|
|
|
- $('#file-0').fileinput({
|
|
|
+ $("#file-0").fileinput({
|
|
|
theme: 'fas',
|
|
|
'allowedFileExtensions': ['jpg', 'png', 'gif']
|
|
|
});
|
|
|
- $('#file-1').fileinput({
|
|
|
+ $("#file-1").fileinput({
|
|
|
theme: 'fas',
|
|
|
uploadUrl: '#', // you must set a valid URL here else you will get an error
|
|
|
allowedFileExtensions: ['jpg', 'png', 'gif'],
|
|
@@ -171,40 +161,40 @@
|
|
|
alert('File Selected. Name: ' + l + ', Num: ' + n);
|
|
|
});
|
|
|
*/
|
|
|
- $('#file-3').fileinput({
|
|
|
+ $("#file-3").fileinput({
|
|
|
theme: 'fas',
|
|
|
showUpload: false,
|
|
|
showCaption: false,
|
|
|
- browseClass: 'btn btn-primary btn-lg',
|
|
|
- fileType: 'any',
|
|
|
- previewFileIcon: '<i class=\'glyphicon glyphicon-king\'></i>',
|
|
|
+ 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'
|
|
|
+ "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}
|
|
|
+ {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({
|
|
|
+ $("#file-4").fileinput({
|
|
|
theme: 'fas',
|
|
|
uploadExtraData: {kvId: '10'}
|
|
|
});
|
|
|
- $('.btn-warning').on('click', function () {
|
|
|
- var $el = $('#file-4');
|
|
|
+ $(".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'});
|
|
|
+ $(".btn-info").on('click', function () {
|
|
|
+ $("#file-4").fileinput('refresh', {previewClass: 'bg-info'});
|
|
|
});
|
|
|
/*
|
|
|
$('#file-4').on('fileselectnone', function() {
|
|
@@ -215,26 +205,26 @@
|
|
|
});
|
|
|
*/
|
|
|
$(document).ready(function () {
|
|
|
- $('#test-upload').fileinput({
|
|
|
+ $("#test-upload").fileinput({
|
|
|
'theme': 'fas',
|
|
|
'showPreview': false,
|
|
|
'allowedFileExtensions': ['jpg', 'png', 'gif'],
|
|
|
'elErrorContainer': '#errorBlock'
|
|
|
});
|
|
|
- $('#kv-explorer').fileinput({
|
|
|
+ $("#kv-explorer").fileinput({
|
|
|
'theme': 'explorer-fas',
|
|
|
'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'
|
|
|
+ "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}
|
|
|
+ {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}
|
|
|
]
|
|
|
});
|
|
|
/*
|