|
|
@@ -0,0 +1,122 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<!-- release v4.1.9, copyright 2014 - 2015 Kartik Visweswaran -->
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8"/>
|
|
|
+ <title>Krajee JQuery Plugins - © Kartik</title>
|
|
|
+ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
|
|
|
+ <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
|
|
|
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
|
+ <script src="../js/fileinput.js" type="text/javascript"></script>
|
|
|
+ <script src="../js/fileinput_locale_pl.js" type="text/javascript"></script>
|
|
|
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="container kv-main">
|
|
|
+ <div class="page-header">
|
|
|
+ <h1>Bootstrap File Input - przykład<small><a href="https://github.com/kartik-v/bootstrap-fileinput-samples"><i class="glyphicon glyphicon-download"></i> Lista przykładowych plików</a></small></h1>
|
|
|
+ </div>
|
|
|
+ <form enctype="multipart/form-data">
|
|
|
+ <input id="file-0" class="file" type="file" multiple data-min-file-count="1">
|
|
|
+ <br>
|
|
|
+ <button type="submit" class="btn btn-primary">Wyślij</button>
|
|
|
+ <button type="reset" class="btn btn-default">Wyczyść</button>
|
|
|
+ </form>
|
|
|
+ <br>
|
|
|
+ <form enctype="multipart/form-data">
|
|
|
+ <input id="file-0a" class="file" type="file" multiple data-min-file-count="3">
|
|
|
+ <br>
|
|
|
+ <div class="form-group">
|
|
|
+ <input id="file-0b" class="file" type="file">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input id="file-2" type="file" class="file" readonly data-show-upload="false">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label>Preview File Icon</label>
|
|
|
+ <input id="file-3" type="file" multiple=true>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input id="file-4" type="file" class="file" data-upload-url="#">
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <button class="btn btn-warning" type="button">Wyłącz test</button>
|
|
|
+ <button class="btn btn-info" type="reset">Odśwież test</button>
|
|
|
+ <button class="btn btn-primary">Wyślij</button>
|
|
|
+ <button class="btn btn-default" type="reset">Wyczyść</button>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input type="file" class="file" id="test-upload" multiple>
|
|
|
+ <div id="errorBlock" class="help-block"></div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-preview-file-icon="">
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ <script>
|
|
|
+ $("#file-0").fileinput({
|
|
|
+ 'allowedFileExtensions' : ['jpg', 'png','gif'],
|
|
|
+ });
|
|
|
+ $("#file-1").fileinput({
|
|
|
+ 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({
|
|
|
+ showUpload: false,
|
|
|
+ showCaption: false,
|
|
|
+ browseClass: "btn btn-primary btn-lg",
|
|
|
+ fileType: "any",
|
|
|
+ previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
|
|
|
+ });
|
|
|
+ $("#file-4").fileinput({
|
|
|
+ uploadExtraData: {kvId: '10'}
|
|
|
+ });
|
|
|
+ $(".btn-warning").on('click', function() {
|
|
|
+ if ($('#file-4').attr('disabled')) {
|
|
|
+ $('#file-4').fileinput('enable');
|
|
|
+ } else {
|
|
|
+ $('#file-4').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({
|
|
|
+ 'showPreview' : false,
|
|
|
+ 'allowedFileExtensions' : ['jpg', 'png','gif'],
|
|
|
+ 'elErrorContainer': '#errorBlock'
|
|
|
+ });
|
|
|
+ /*
|
|
|
+ $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
|
|
|
+ alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
|
|
|
+ });
|
|
|
+ */
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</html>
|
Wojciech Banaś