index.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <!-- release v2.4.0, copyright 2014 Kartik Visweswaran -->
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8"/>
  6. <title>Krajee JQuery Plugins - &copy; Kartik</title>
  7. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/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/1.11.0/jquery.min.js"></script>
  10. <script src="../js/fileinput.js" type="text/javascript"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14. <h1>Bootstrap File Input Example</h1>
  15. <form enctype="multipart/form-data">
  16. <div class="form-group">
  17. <input id="file-1" type="file" multiple=true data-preview-file-type="any">
  18. </div>
  19. <div class="form-group">
  20. <input id="file-1a" type="file" multiple=true class="file" data-preview-file-type="any" data-initial-caption="Kartik" data-overwrite-initial="false">
  21. </div>
  22. <div class="form-group">
  23. <input id="file-2" type="file" class="file" readonly=true>
  24. </div>
  25. <div class="form-group">
  26. <input id="file-3" type="file" multiple=true>
  27. </div>
  28. <div class="form-group">
  29. <input id="file-4" type="file" class="file">
  30. </div>
  31. <div class="form-group">
  32. <button class="btn btn-warning" type="button">Disable Test</button>
  33. <button class="btn btn-primary">Submit</button>
  34. <button class="btn btn-default" type="reset">Reset</button>
  35. </div>
  36. </form>
  37. </div>
  38. </body>
  39. <script>
  40. $("#file-1").fileinput({
  41. initialPreview: ["<img src='Desert.jpg' class='file-preview-image'>", "<img src='Jellyfish.jpg' class='file-preview-image'>"],
  42. overwriteInitial: false,
  43. maxFileSize: 100,
  44. maxFilesNum: 10
  45. });
  46. $("#file-3").fileinput({
  47. showCaption: false,
  48. browseClass: "btn btn-primary btn-lg",
  49. fileType: "any"
  50. });
  51. $(".btn-warning").on('click', function() {
  52. if ($('#file-4').attr('disabled')) {
  53. $('#file-4').fileinput('enable');
  54. } else {
  55. $('#file-4').fileinput('disable');
  56. }
  57. });
  58. </script>
  59. </html>