|
@@ -5,45 +5,44 @@
|
|
|
<head>
|
|
<head>
|
|
|
<meta charset="UTF-8"/>
|
|
<meta charset="UTF-8"/>
|
|
|
<title>Krajee JQuery Plugins - © Kartik</title>
|
|
<title>Krajee JQuery Plugins - © Kartik</title>
|
|
|
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <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 href="../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"/>
|
|
|
|
|
- <link href="../themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
|
|
|
|
|
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
|
|
|
|
|
+ <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/sortable.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/fileinput.js" type="text/javascript"></script>
|
|
|
<script src="../js/locales/fr.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="../js/locales/es.js" type="text/javascript"></script>
|
|
|
- <script src="../themes/explorer-fa/theme.js" type="text/javascript"></script>
|
|
|
|
|
- <script src="../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 src="../themes/fas/theme.js" type="text/javascript"></script>
|
|
|
|
|
+ <script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
-<div class="container kv-main">
|
|
|
|
|
- <div class="page-header">
|
|
|
|
|
- <h1>Bootstrap File Input Example
|
|
|
|
|
- <small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i
|
|
|
|
|
- class="glyphicon glyphicon-download"></i> Download Sample Files</a></small>
|
|
|
|
|
- </h1>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+<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">
|
|
<form enctype="multipart/form-data">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
<input id="kv-explorer" type="file" multiple>
|
|
<input id="kv-explorer" type="file" multiple>
|
|
|
</div>
|
|
</div>
|
|
|
<br>
|
|
<br>
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
|
|
|
|
|
|
|
+ <input id="file-0a" class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
<br>
|
|
<br>
|
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
|
- <button type="reset" class="btn btn-default">Reset</button>
|
|
|
|
|
|
|
+ <button type="reset" class="btn btn-outline-secondary">Reset</button>
|
|
|
</form>
|
|
</form>
|
|
|
<hr>
|
|
<hr>
|
|
|
<form enctype="multipart/form-data">
|
|
<form enctype="multipart/form-data">
|
|
|
<label for="file-0b">Test invalid input type</label>
|
|
<label for="file-0b">Test invalid input type</label>
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1">
|
|
|
|
|
|
|
+ <input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
<script>
|
|
<script>
|
|
|
$(document).on('ready', function () {
|
|
$(document).on('ready', function () {
|
|
@@ -54,24 +53,24 @@
|
|
|
<hr>
|
|
<hr>
|
|
|
<form enctype="multipart/form-data">
|
|
<form enctype="multipart/form-data">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-0c" class="file" type="file" multiple data-min-file-count="3">
|
|
|
|
|
|
|
+ <input id="file-0c" class="file" type="file" multiple data-min-file-count="3" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
<hr>
|
|
<hr>
|
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-0d" class="file" type="file">
|
|
|
|
|
|
|
+ <input id="file-0d" class="file" type="file" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<hr>
|
|
<hr>
|
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
|
|
|
|
|
|
|
+ <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<hr>
|
|
<hr>
|
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-2" type="file" class="file" readonly data-show-upload="false">
|
|
|
|
|
|
|
+ <input id="file-2" type="file" class="file" readonly data-show-upload="false" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<hr>
|
|
<hr>
|
|
@@ -84,7 +83,7 @@
|
|
|
<hr>
|
|
<hr>
|
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-4" type="file" class="file" data-upload-url="#">
|
|
|
|
|
|
|
+ <input id="file-4" type="file" class="file" data-upload-url="#" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<hr>
|
|
<hr>
|
|
@@ -92,19 +91,19 @@
|
|
|
<button class="btn btn-warning" type="button">Disable Test</button>
|
|
<button class="btn btn-warning" type="button">Disable Test</button>
|
|
|
<button class="btn btn-info" type="reset">Refresh Test</button>
|
|
<button class="btn btn-info" type="reset">Refresh Test</button>
|
|
|
<button class="btn btn-primary">Submit</button>
|
|
<button class="btn btn-primary">Submit</button>
|
|
|
- <button class="btn btn-default" type="reset">Reset</button>
|
|
|
|
|
|
|
+ <button class="btn btn-outline-secondary" type="reset">Reset</button>
|
|
|
</div>
|
|
</div>
|
|
|
<hr>
|
|
<hr>
|
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input type="file" class="file" id="test-upload" multiple>
|
|
|
|
|
|
|
+ <input type="file" class="file" id="test-upload" multiple data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
<div id="errorBlock" class="help-block"></div>
|
|
<div id="errorBlock" class="help-block"></div>
|
|
|
</div>
|
|
</div>
|
|
|
<hr>
|
|
<hr>
|
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
|
<div class="file-loading">
|
|
<div class="file-loading">
|
|
|
- <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#">
|
|
|
|
|
|
|
+ <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-theme="fas">
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</form>
|
|
</form>
|
|
@@ -129,23 +128,23 @@
|
|
|
</body>
|
|
</body>
|
|
|
<script>
|
|
<script>
|
|
|
$('#file-fr').fileinput({
|
|
$('#file-fr').fileinput({
|
|
|
- theme: 'fa',
|
|
|
|
|
|
|
+ theme: 'fas',
|
|
|
language: 'fr',
|
|
language: 'fr',
|
|
|
uploadUrl: '#',
|
|
uploadUrl: '#',
|
|
|
allowedFileExtensions: ['jpg', 'png', 'gif']
|
|
allowedFileExtensions: ['jpg', 'png', 'gif']
|
|
|
});
|
|
});
|
|
|
$('#file-es').fileinput({
|
|
$('#file-es').fileinput({
|
|
|
- theme: 'fa',
|
|
|
|
|
|
|
+ theme: 'fas',
|
|
|
language: 'es',
|
|
language: 'es',
|
|
|
uploadUrl: '#',
|
|
uploadUrl: '#',
|
|
|
allowedFileExtensions: ['jpg', 'png', 'gif']
|
|
allowedFileExtensions: ['jpg', 'png', 'gif']
|
|
|
});
|
|
});
|
|
|
$("#file-0").fileinput({
|
|
$("#file-0").fileinput({
|
|
|
- theme: 'fa',
|
|
|
|
|
|
|
+ theme: 'fas',
|
|
|
'allowedFileExtensions': ['jpg', 'png', 'gif']
|
|
'allowedFileExtensions': ['jpg', 'png', 'gif']
|
|
|
});
|
|
});
|
|
|
$("#file-1").fileinput({
|
|
$("#file-1").fileinput({
|
|
|
- theme: 'fa',
|
|
|
|
|
|
|
+ theme: 'fas',
|
|
|
uploadUrl: '#', // you must set a valid URL here else you will get an error
|
|
uploadUrl: '#', // you must set a valid URL here else you will get an error
|
|
|
allowedFileExtensions: ['jpg', 'png', 'gif'],
|
|
allowedFileExtensions: ['jpg', 'png', 'gif'],
|
|
|
overwriteInitial: false,
|
|
overwriteInitial: false,
|
|
@@ -162,7 +161,7 @@
|
|
|
});
|
|
});
|
|
|
*/
|
|
*/
|
|
|
$("#file-3").fileinput({
|
|
$("#file-3").fileinput({
|
|
|
- theme: 'fa',
|
|
|
|
|
|
|
+ theme: 'fas',
|
|
|
showUpload: false,
|
|
showUpload: false,
|
|
|
showCaption: false,
|
|
showCaption: false,
|
|
|
browseClass: "btn btn-primary btn-lg",
|
|
browseClass: "btn btn-primary btn-lg",
|
|
@@ -182,7 +181,7 @@
|
|
|
]
|
|
]
|
|
|
});
|
|
});
|
|
|
$("#file-4").fileinput({
|
|
$("#file-4").fileinput({
|
|
|
- theme: 'fa',
|
|
|
|
|
|
|
+ theme: 'fas',
|
|
|
uploadExtraData: {kvId: '10'}
|
|
uploadExtraData: {kvId: '10'}
|
|
|
});
|
|
});
|
|
|
$(".btn-warning").on('click', function () {
|
|
$(".btn-warning").on('click', function () {
|
|
@@ -206,13 +205,13 @@
|
|
|
*/
|
|
*/
|
|
|
$(document).ready(function () {
|
|
$(document).ready(function () {
|
|
|
$("#test-upload").fileinput({
|
|
$("#test-upload").fileinput({
|
|
|
- 'theme': 'fa',
|
|
|
|
|
|
|
+ 'theme': 'fas',
|
|
|
'showPreview': false,
|
|
'showPreview': false,
|
|
|
'allowedFileExtensions': ['jpg', 'png', 'gif'],
|
|
'allowedFileExtensions': ['jpg', 'png', 'gif'],
|
|
|
'elErrorContainer': '#errorBlock'
|
|
'elErrorContainer': '#errorBlock'
|
|
|
});
|
|
});
|
|
|
$("#kv-explorer").fileinput({
|
|
$("#kv-explorer").fileinput({
|
|
|
- 'theme': 'explorer-fa',
|
|
|
|
|
|
|
+ 'theme': 'explorer-fas',
|
|
|
'uploadUrl': '#',
|
|
'uploadUrl': '#',
|
|
|
overwriteInitial: false,
|
|
overwriteInitial: false,
|
|
|
initialPreviewAsData: true,
|
|
initialPreviewAsData: true,
|
Kartik Visweswaran