jquery_ui_widget.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  5. <title>Plupload - jQuery UI Widget</title>
  6. <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
  7. <link rel="stylesheet" href="../../js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />
  8. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  9. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
  10. <!-- production -->
  11. <script type="text/javascript" src="../../js/plupload.full.min.js"></script>
  12. <script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
  13. <!-- debug
  14. <script type="text/javascript" src="../../js/moxie.js"></script>
  15. <script type="text/javascript" src="../../js/plupload.dev.js"></script>
  16. <script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
  17. -->
  18. </head>
  19. <body style="font: 13px Verdana; background: #eee; color: #333">
  20. <h1>jQuery UI Widget</h1>
  21. <p>You can see this example with different themes on the <a href="http://plupload.com/example_jquery_ui.php">www.plupload.com</a> website.</p>
  22. <form id="form" method="post" action="../dump.php">
  23. <div id="uploader">
  24. <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
  25. </div>
  26. <br />
  27. <input type="submit" value="Submit" />
  28. </form>
  29. <script type="text/javascript">
  30. // Initialize the widget when the DOM is ready
  31. $(function() {
  32. $("#uploader").plupload({
  33. // General settings
  34. runtimes : 'html5,flash,silverlight,html4',
  35. url : '../upload.php',
  36. // User can upload no more then 20 files in one go (sets multiple_queues to false)
  37. max_file_count: 20,
  38. chunk_size: '1mb',
  39. // Resize images on clientside if we can
  40. resize : {
  41. width : 200,
  42. height : 200,
  43. quality : 90,
  44. crop: true // crop to exact dimensions
  45. },
  46. filters : {
  47. // Maximum file size
  48. max_file_size : '1000mb',
  49. // Specify what files to browse for
  50. mime_types: [
  51. {title : "Image files", extensions : "jpg,gif,png"},
  52. {title : "Zip files", extensions : "zip"}
  53. ]
  54. },
  55. // Rename files by clicking on their titles
  56. rename: true,
  57. // Sort files
  58. sortable: true,
  59. // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
  60. dragdrop: true,
  61. // Views to activate
  62. views: {
  63. list: true,
  64. thumbs: true, // Show thumbs
  65. active: 'thumbs'
  66. },
  67. // Flash settings
  68. flash_swf_url : '../../js/Moxie.swf',
  69. // Silverlight settings
  70. silverlight_xap_url : '../../js/Moxie.xap'
  71. });
  72. // Handle the case when form was submitted before uploading has finished
  73. $('#form').submit(function(e) {
  74. // Files in queue upload them first
  75. if ($('#uploader').plupload('getFiles').length > 0) {
  76. // When all files are uploaded submit form
  77. $('#uploader').on('complete', function() {
  78. $('#form')[0].submit();
  79. });
  80. $('#uploader').plupload('start');
  81. } else {
  82. alert("You must have at least one file in the queue.");
  83. }
  84. return false; // Keep the form from submitting
  85. });
  86. });
  87. </script>
  88. </body>
  89. </html>