index.html 2.3 KB

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