jquery_ui_widget.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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 - Queue widget example</title>
  6. <style type="text/css">
  7. body {
  8. font-family:Verdana, Geneva, sans-serif;
  9. font-size:13px;
  10. color:#333;
  11. background:url(../bg.jpg);
  12. }
  13. </style>
  14. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
  15. <link rel="stylesheet" href="../../js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />
  16. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  17. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  18. <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
  19. <script type="text/javascript" src="../../js/plupload.js"></script>
  20. <script type="text/javascript" src="../../js/plupload.gears.js"></script>
  21. <script type="text/javascript" src="../../js/plupload.silverlight.js"></script>
  22. <script type="text/javascript" src="../../js/plupload.flash.js"></script>
  23. <script type="text/javascript" src="../../js/plupload.browserplus.js"></script>
  24. <script type="text/javascript" src="../../js/plupload.html4.js"></script>
  25. <script type="text/javascript" src="../../js/plupload.html5.js"></script>
  26. <script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script>
  27. <!--<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>-->
  28. </head>
  29. <body>
  30. <h1>jQuery UI Widget</h1>
  31. <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>
  32. <form method="post" action="dump.php">
  33. <div id="uploader">
  34. <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
  35. </div>
  36. </form>
  37. <script type="text/javascript">
  38. // Convert divs to queue widgets when the DOM is ready
  39. $(function() {
  40. $("#uploader").plupload({
  41. // General settings
  42. runtimes : 'flash,html5,browserplus,silverlight,gears,html4',
  43. url : '../upload.php',
  44. max_file_size : '1000mb',
  45. max_file_count: 20, // user can add no more then 20 files at a time
  46. chunk_size : '1mb',
  47. unique_names : true,
  48. multiple_queues : true,
  49. // Resize images on clientside if we can
  50. resize : {width : 320, height : 240, quality : 90},
  51. // Rename files by clicking on their titles
  52. rename: true,
  53. // Sort files
  54. sortable: true,
  55. // Specify what files to browse for
  56. filters : [
  57. {title : "Image files", extensions : "jpg,gif,png"},
  58. {title : "Zip files", extensions : "zip,avi"}
  59. ],
  60. // Flash settings
  61. flash_swf_url : '../../js/plupload.flash.swf',
  62. // Silverlight settings
  63. silverlight_xap_url : '../../js/plupload.silverlight.xap'
  64. });
  65. // Client side form validation
  66. $('form').submit(function(e) {
  67. var uploader = $('#uploader').plupload('getUploader');
  68. // Validate number of uploaded files
  69. if (uploader.total.uploaded == 0) {
  70. // Files in queue upload them first
  71. if (uploader.files.length > 0) {
  72. // When all files are uploaded submit form
  73. uploader.bind('UploadProgress', function() {
  74. if (uploader.total.uploaded == uploader.files.length)
  75. $('form').submit();
  76. });
  77. uploader.start();
  78. } else
  79. alert('You must at least upload one file.');
  80. e.preventDefault();
  81. }
  82. });
  83. });
  84. </script>
  85. </body>
  86. </html>