index.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  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" class="file" multiple=true data-preview-file-type="any">
  17. </div>
  18. <div class="form-group">
  19. <input id="file-2" type="file" class="file" readonly=true>
  20. </div>
  21. <div class="form-group">
  22. <input id="file-3" type="file" multiple=true>
  23. </div>
  24. <div class="form-group">
  25. <input id="file-4" type="file" class="file">
  26. </div>
  27. <div class="form-group">
  28. <button class="btn btn-warning" type="button">Disable Test</button>
  29. <button class="btn btn-primary">Submit</button>
  30. <button class="btn btn-default" type="reset">Reset</button>
  31. </div>
  32. </form>
  33. </div>
  34. </body>
  35. <script>
  36. $("#file-1").fileinput({
  37. initialPreview: ["<img src='Desert.jpg' class='file-preview-image'>", "<img src='Jellyfish.jpg' class='file-preview-image'>"],
  38. overwriteInitial: false
  39. });
  40. $("#file-3").fileinput({
  41. showCaption: false,
  42. browseClass: "btn btn-primary btn-lg",
  43. fileType: "any"
  44. });
  45. $(".btn-warning").on('click', function() {
  46. $("#file-4").attr('disabled', 'disabled');
  47. $('#file-4').fileinput('refresh', {browseLabel: 'Kartik'});
  48. });
  49. </script>
  50. </html>