index.html 2.6 KB

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