index.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <!DOCTYPE html>
  2. <!-- release v4.2.3, copyright 2014 - 2015 Kartik Visweswaran -->
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8"/>
  6. <title>Krajee JQuery Plugins - &copy; Kartik</title>
  7. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  8. <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
  9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  10. <script src="../js/fileinput.min.js" type="text/javascript"></script>
  11. <script src="../js/fileinput_locale_fr.js" type="text/javascript"></script>
  12. <script src="../js/fileinput_locale_es.js" type="text/javascript"></script>
  13. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
  14. </head>
  15. <body>
  16. <div class="container kv-main">
  17. <div class="page-header">
  18. <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>
  19. </div>
  20. <form enctype="multipart/form-data">
  21. <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
  22. <br>
  23. <button type="submit" class="btn btn-primary">Submit</button>
  24. <button type="reset" class="btn btn-default">Reset</button>
  25. </form>
  26. <hr>
  27. <form enctype="multipart/form-data">
  28. <label>Test invalid input type</label>
  29. <input id="file-0b" class="file" type="text" multiple data-min-file-count="1">
  30. <script>
  31. $(document).on('ready', function(){$("#file-0b").fileinput();});
  32. </script>
  33. </form>
  34. <hr>
  35. <form enctype="multipart/form-data">
  36. <input id="file-0a" class="file" type="file" multiple data-min-file-count="3">
  37. <hr>
  38. <div class="form-group">
  39. <input id="file-0b" class="file" type="file">
  40. </div>
  41. <hr>
  42. <div class="form-group">
  43. <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
  44. </div>
  45. <hr>
  46. <div class="form-group">
  47. <input id="file-2" type="file" class="file" readonly data-show-upload="false">
  48. </div>
  49. <hr>
  50. <div class="form-group">
  51. <label>Preview File Icon</label>
  52. <input id="file-3" type="file" multiple=true>
  53. </div>
  54. <hr>
  55. <div class="form-group">
  56. <input id="file-4" type="file" class="file" data-upload-url="#">
  57. </div>
  58. <hr>
  59. <div class="form-group">
  60. <button class="btn btn-warning" type="button">Disable Test</button>
  61. <button class="btn btn-info" type="reset">Refresh Test</button>
  62. <button class="btn btn-primary">Submit</button>
  63. <button class="btn btn-default" type="reset">Reset</button>
  64. </div>
  65. <hr>
  66. <div class="form-group">
  67. <input type="file" class="file" id="test-upload" multiple>
  68. <div id="errorBlock" class="help-block"></div>
  69. </div>
  70. <hr>
  71. <div class="form-group">
  72. <input id="file-5" class="file" type="file" multiple data-preview-file-type="any" data-upload-url="#" data-preview-file-icon="">
  73. </div>
  74. </form>
  75. <hr>
  76. <h4>Multi Language Inputs</h4>
  77. <form enctype="multipart/form-data">
  78. <label>French Input</label>
  79. <input id="file-fr" name="file-fr[]" type="file" multiple>
  80. <hr style="border: 2px dotted">
  81. <label>Spanish Input</label>
  82. <input id="file-es" name="file-es[]" type="file" multiple>
  83. </form>
  84. <hr>
  85. <br>
  86. </div>
  87. </body>
  88. <script>
  89. $('#file-fr').fileinput({
  90. language: 'fr',
  91. uploadUrl: '#',
  92. allowedFileExtensions : ['jpg', 'png','gif'],
  93. });
  94. $('#file-es').fileinput({
  95. language: 'es',
  96. uploadUrl: '#',
  97. allowedFileExtensions : ['jpg', 'png','gif'],
  98. });
  99. $("#file-0").fileinput({
  100. 'allowedFileExtensions' : ['jpg', 'png','gif'],
  101. });
  102. $("#file-1").fileinput({
  103. uploadUrl: '#', // you must set a valid URL here else you will get an error
  104. allowedFileExtensions : ['jpg', 'png','gif'],
  105. overwriteInitial: false,
  106. maxFileSize: 1000,
  107. maxFilesNum: 10,
  108. //allowedFileTypes: ['image', 'video', 'flash'],
  109. slugCallback: function(filename) {
  110. return filename.replace('(', '_').replace(']', '_');
  111. }
  112. });
  113. /*
  114. $(".file").on('fileselect', function(event, n, l) {
  115. alert('File Selected. Name: ' + l + ', Num: ' + n);
  116. });
  117. */
  118. $("#file-3").fileinput({
  119. showUpload: false,
  120. showCaption: false,
  121. browseClass: "btn btn-primary btn-lg",
  122. fileType: "any",
  123. previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
  124. });
  125. $("#file-4").fileinput({
  126. uploadExtraData: {kvId: '10'}
  127. });
  128. $(".btn-warning").on('click', function() {
  129. if ($('#file-4').attr('disabled')) {
  130. $('#file-4').fileinput('enable');
  131. } else {
  132. $('#file-4').fileinput('disable');
  133. }
  134. });
  135. $(".btn-info").on('click', function() {
  136. $('#file-4').fileinput('refresh', {previewClass:'bg-info'});
  137. });
  138. /*
  139. $('#file-4').on('fileselectnone', function() {
  140. alert('Huh! You selected no files.');
  141. });
  142. $('#file-4').on('filebrowse', function() {
  143. alert('File browse clicked for #file-4');
  144. });
  145. */
  146. $(document).ready(function() {
  147. $("#test-upload").fileinput({
  148. 'showPreview' : false,
  149. 'allowedFileExtensions' : ['jpg', 'png','gif'],
  150. 'elErrorContainer': '#errorBlock'
  151. });
  152. /*
  153. $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
  154. alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
  155. });
  156. */
  157. });
  158. </script>
  159. </html>