| 6056 |
efrain |
1 |
<!DOCTYPE html>
|
|
|
2 |
<!-- release v5.1.3, copyright 2014 - 2020 Kartik Visweswaran -->
|
|
|
3 |
<!--suppress JSUnresolvedLibraryURL -->
|
|
|
4 |
<html lang="en">
|
|
|
5 |
<head>
|
|
|
6 |
<meta charset="UTF-8"/>
|
|
|
7 |
<title>Krajee JQuery Plugins - © Kartik</title>
|
|
|
8 |
|
|
|
9 |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
|
|
|
10 |
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
|
|
|
11 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
|
|
|
12 |
<link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
|
|
|
13 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
|
|
|
14 |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
|
|
15 |
<script src="../js/plugins/piexif.js" type="text/javascript"></script>
|
|
|
16 |
<script src="../js/plugins/sortable.js" type="text/javascript"></script>
|
|
|
17 |
<script src="../js/fileinput.js" type="text/javascript"></script>
|
|
|
18 |
<script src="../js/locales/fr.js" type="text/javascript"></script>
|
|
|
19 |
<script src="../js/locales/es.js" type="text/javascript"></script>
|
|
|
20 |
<script src="../themes/fas/theme.js" type="text/javascript"></script>
|
|
|
21 |
<script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>
|
|
|
22 |
</head>
|
|
|
23 |
<body>
|
|
|
24 |
<div class="container my-4">
|
|
|
25 |
<h1>Bootstrap File Input Examples
|
|
|
26 |
<small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i
|
|
|
27 |
class="glyphicon glyphicon-download"></i> Download Sample Files</a></small>
|
|
|
28 |
</h1>
|
|
|
29 |
<hr>
|
|
|
30 |
<form enctype="multipart/form-data">
|
|
|
31 |
<div class="file-loading">
|
|
|
32 |
<input id="kv-explorer" type="file" multiple>
|
|
|
33 |
</div>
|
|
|
34 |
<br>
|
|
|
35 |
<div class="file-loading">
|
|
|
36 |
<input id="file-0a" class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
|
|
|
37 |
</div>
|
|
|
38 |
<br>
|
|
|
39 |
<button type="submit" class="btn btn-primary">Submit</button>
|
|
|
40 |
<button type="reset" class="btn btn-outline-secondary">Reset</button>
|
|
|
41 |
</form>
|
|
|
42 |
<hr>
|
|
|
43 |
<h5>Preupload Validation</h5>
|
|
|
44 |
<input id="file-0" name="file-0" type="file">
|
|
|
45 |
<br>
|
|
|
46 |
<textarea id="description" rows=3" class="form-control" placeholder="Enter description for the files selected..."></textarea>
|
|
|
47 |
<br>
|
|
|
48 |
<form enctype="multipart/form-data">
|
|
|
49 |
<label for="file-0b">Test invalid input type</label>
|
|
|
50 |
<div class="file-loading">
|
|
|
51 |
<input id="file-0b" name="file-0b" class="file" type="text" multiple data-min-file-count="1" data-theme="fas">
|
|
|
52 |
</div>
|
|
|
53 |
<script>
|
|
|
54 |
$(document).on('ready', function () {
|
|
|
55 |
$("#file-0b").fileinput();
|
|
|
56 |
});
|
|
|
57 |
</script>
|
|
|
58 |
</form>
|
|
|
59 |
<hr>
|
|
|
60 |
<form enctype="multipart/form-data">
|
|
|
61 |
<div class="file-loading">
|
|
|
62 |
<input id="file-0c" class="file" type="file" multiple data-min-file-count="3" data-theme="fas">
|
|
|
63 |
</div>
|
|
|
64 |
<hr>
|
|
|
65 |
<div class="form-group">
|
|
|
66 |
<div class="file-loading">
|
|
|
67 |
<input id="file-0d" class="file" type="file" data-theme="fas">
|
|
|
68 |
</div>
|
|
|
69 |
</div>
|
|
|
70 |
<hr>
|
|
|
71 |
<div class="form-group">
|
|
|
72 |
<div class="file-loading">
|
|
|
73 |
<input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" data-theme="fas">
|
|
|
74 |
</div>
|
|
|
75 |
</div>
|
|
|
76 |
<hr>
|
|
|
77 |
<div class="form-group">
|
|
|
78 |
<div class="file-loading">
|
|
|
79 |
<input id="file-2" type="file" class="file" readonly data-show-upload="false" data-theme="fas">
|
|
|
80 |
</div>
|
|
|
81 |
</div>
|
|
|
82 |
<hr>
|
|
|
83 |
<div class="form-group">
|
|
|
84 |
<div class="file-loading">
|
|
|
85 |
<label>Preview File Icon</label>
|
|
|
86 |
<input id="file-3" type="file" multiple>
|
|
|
87 |
</div>
|
|
|
88 |
</div>
|
|
|
89 |
<hr>
|
|
|
90 |
<div class="form-group">
|
|
|
91 |
<div class="file-loading">
|
|
|
92 |
<input id="file-4" type="file" class="file" data-upload-url="#" data-theme="fas">
|
|
|
93 |
</div>
|
|
|
94 |
</div>
|
|
|
95 |
<hr>
|
|
|
96 |
<div class="form-group">
|
|
|
97 |
<button class="btn btn-warning" type="button">Disable Test</button>
|
|
|
98 |
<button class="btn btn-info" type="reset">Refresh Test</button>
|
|
|
99 |
<button class="btn btn-primary">Submit</button>
|
|
|
100 |
<button class="btn btn-outline-secondary" type="reset">Reset</button>
|
|
|
101 |
</div>
|
|
|
102 |
<hr>
|
|
|
103 |
<div class="form-group">
|
|
|
104 |
<div class="file-loading">
|
|
|
105 |
<input type="file" class="file" id="test-upload" multiple data-theme="fas">
|
|
|
106 |
</div>
|
|
|
107 |
<div id="errorBlock" class="help-block"></div>
|
|
|
108 |
</div>
|
|
|
109 |
<hr>
|
|
|
110 |
<div class="form-group">
|
|
|
111 |
<div class="file-loading">
|
|
|
112 |
<input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-theme="fas">
|
|
|
113 |
</div>
|
|
|
114 |
</div>
|
|
|
115 |
</form>
|
|
|
116 |
|
|
|
117 |
|
|
|
118 |
<hr>
|
|
|
119 |
<h4>Multi Language Inputs</h4>
|
|
|
120 |
<form enctype="multipart/form-data">
|
|
|
121 |
<label>French Input</label>
|
|
|
122 |
<div class="file-loading">
|
|
|
123 |
<input id="file-fr" name="file-fr[]" type="file" multiple>
|
|
|
124 |
</div>
|
|
|
125 |
<hr style="border: 2px dotted">
|
|
|
126 |
<label>Spanish Input</label>
|
|
|
127 |
<div class="file-loading">
|
|
|
128 |
<input id="file-es" name="file-es[]" type="file" multiple>
|
|
|
129 |
</div>
|
|
|
130 |
</form>
|
|
|
131 |
<hr>
|
|
|
132 |
<br>
|
|
|
133 |
</div>
|
|
|
134 |
</body>
|
|
|
135 |
<script>
|
|
|
136 |
$('#file-fr').fileinput({
|
|
|
137 |
theme: 'fas',
|
|
|
138 |
language: 'fr',
|
|
|
139 |
uploadUrl: '#',
|
|
|
140 |
allowedFileExtensions: ['jpg', 'png', 'gif']
|
|
|
141 |
});
|
|
|
142 |
$('#file-es').fileinput({
|
|
|
143 |
theme: 'fas',
|
|
|
144 |
language: 'es',
|
|
|
145 |
uploadUrl: '#',
|
|
|
146 |
allowedFileExtensions: ['jpg', 'png', 'gif']
|
|
|
147 |
});
|
|
|
148 |
$("#file-0").fileinput({
|
|
|
149 |
theme: 'fas',
|
|
|
150 |
uploadUrl: '#'
|
|
|
151 |
}).on('filepreupload', function(event, data, previewId, index) {
|
|
|
152 |
alert('The description entered is:\n\n' + ($('#description').val() || ' NULL'));
|
|
|
153 |
});
|
|
|
154 |
$("#file-1").fileinput({
|
|
|
155 |
theme: 'fas',
|
|
|
156 |
uploadUrl: '#', // you must set a valid URL here else you will get an error
|
|
|
157 |
allowedFileExtensions: ['jpg', 'png', 'gif'],
|
|
|
158 |
overwriteInitial: false,
|
|
|
159 |
maxFileSize: 1000,
|
|
|
160 |
maxFilesNum: 10,
|
|
|
161 |
//allowedFileTypes: ['image', 'video', 'flash'],
|
|
|
162 |
slugCallback: function (filename) {
|
|
|
163 |
return filename.replace('(', '_').replace(']', '_');
|
|
|
164 |
}
|
|
|
165 |
});
|
|
|
166 |
/*
|
|
|
167 |
$(".file").on('fileselect', function(event, n, l) {
|
|
|
168 |
alert('File Selected. Name: ' + l + ', Num: ' + n);
|
|
|
169 |
});
|
|
|
170 |
*/
|
|
|
171 |
$("#file-3").fileinput({
|
|
|
172 |
theme: 'fas',
|
|
|
173 |
showUpload: false,
|
|
|
174 |
showCaption: false,
|
|
|
175 |
browseClass: "btn btn-primary btn-lg",
|
|
|
176 |
fileType: "any",
|
|
|
177 |
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
|
|
|
178 |
overwriteInitial: false,
|
|
|
179 |
initialPreviewAsData: true,
|
|
|
180 |
initialPreview: [
|
|
|
181 |
"http://lorempixel.com/1920/1080/transport/1",
|
|
|
182 |
"http://lorempixel.com/1920/1080/transport/2",
|
|
|
183 |
"http://lorempixel.com/1920/1080/transport/3"
|
|
|
184 |
],
|
|
|
185 |
initialPreviewConfig: [
|
|
|
186 |
{caption: "transport-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
|
|
|
187 |
{caption: "transport-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
|
|
|
188 |
{caption: "transport-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
|
|
|
189 |
]
|
|
|
190 |
});
|
|
|
191 |
$("#file-4").fileinput({
|
|
|
192 |
theme: 'fas',
|
|
|
193 |
uploadExtraData: {kvId: '10'}
|
|
|
194 |
});
|
|
|
195 |
$(".btn-warning").on('click', function () {
|
|
|
196 |
var $el = $("#file-4");
|
|
|
197 |
if ($el.attr('disabled')) {
|
|
|
198 |
$el.fileinput('enable');
|
|
|
199 |
} else {
|
|
|
200 |
$el.fileinput('disable');
|
|
|
201 |
}
|
|
|
202 |
});
|
|
|
203 |
$(".btn-info").on('click', function () {
|
|
|
204 |
$("#file-4").fileinput('refresh', {previewClass: 'bg-info'});
|
|
|
205 |
});
|
|
|
206 |
/*
|
|
|
207 |
$('#file-4').on('fileselectnone', function() {
|
|
|
208 |
alert('Huh! You selected no files.');
|
|
|
209 |
});
|
|
|
210 |
$('#file-4').on('filebrowse', function() {
|
|
|
211 |
alert('File browse clicked for #file-4');
|
|
|
212 |
});
|
|
|
213 |
*/
|
|
|
214 |
$(document).ready(function () {
|
|
|
215 |
$("#test-upload").fileinput({
|
|
|
216 |
'theme': 'fas',
|
|
|
217 |
'showPreview': false,
|
|
|
218 |
'allowedFileExtensions': ['jpg', 'png', 'gif'],
|
|
|
219 |
'elErrorContainer': '#errorBlock'
|
|
|
220 |
});
|
|
|
221 |
$("#kv-explorer").fileinput({
|
|
|
222 |
'theme': 'explorer-fas',
|
|
|
223 |
'uploadUrl': '#',
|
|
|
224 |
overwriteInitial: false,
|
|
|
225 |
initialPreviewAsData: true,
|
|
|
226 |
initialPreview: [
|
|
|
227 |
"http://lorempixel.com/1920/1080/nature/1",
|
|
|
228 |
"http://lorempixel.com/1920/1080/nature/2",
|
|
|
229 |
"http://lorempixel.com/1920/1080/nature/3"
|
|
|
230 |
],
|
|
|
231 |
initialPreviewConfig: [
|
|
|
232 |
{caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
|
|
|
233 |
{caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
|
|
|
234 |
{caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
|
|
|
235 |
]
|
|
|
236 |
});
|
|
|
237 |
/*
|
|
|
238 |
$("#test-upload").on('fileloaded', function(event, file, previewId, index) {
|
|
|
239 |
alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
|
|
|
240 |
});
|
|
|
241 |
*/
|
|
|
242 |
});
|
|
|
243 |
</script>
|
|
|
244 |
</html>
|