events.html 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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. <link rel="stylesheet" href="../../js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" />
  6. <title>Plupload - Events example</title>
  7. <style type="text/css">
  8. body {
  9. font-family:Verdana, Geneva, sans-serif;
  10. font-size:13px;
  11. color:#333;
  12. background:url(../bg.jpg);
  13. }
  14. </style>
  15. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  16. <script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>
  17. <script type="text/javascript" src="../../js/plupload.js"></script>
  18. <script type="text/javascript" src="../../js/plupload.gears.js"></script>
  19. <script type="text/javascript" src="../../js/plupload.silverlight.js"></script>
  20. <script type="text/javascript" src="../../js/plupload.flash.js"></script>
  21. <script type="text/javascript" src="../../js/plupload.browserplus.js"></script>
  22. <script type="text/javascript" src="../../js/plupload.html4.js"></script>
  23. <script type="text/javascript" src="../../js/plupload.html5.js"></script>
  24. <script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script>
  25. </head>
  26. <body>
  27. <form method="post" action="dump.php">
  28. <h1>Events example</h1>
  29. <p>Shows how to bind and use all available events.</p>
  30. <h3>Log messages</h3>
  31. <textarea id="log" style="width: 100%; height: 150px; font-size: 11px" spellcheck="false" wrap="off"></textarea>
  32. <h3>Queue widget</h3>
  33. <div id="uploader" style="width: 450px; height: 330px;">You browser doesn't support upload.</div>
  34. <a id="clear" href="#">Clear queue</a>
  35. </form>
  36. <script type="text/javascript">
  37. $(function() {
  38. function log() {
  39. var str = "";
  40. plupload.each(arguments, function(arg) {
  41. var row = "";
  42. if (typeof(arg) != "string") {
  43. plupload.each(arg, function(value, key) {
  44. // Convert items in File objects to human readable form
  45. if (arg instanceof plupload.File) {
  46. // Convert status to human readable
  47. switch (value) {
  48. case plupload.QUEUED:
  49. value = 'QUEUED';
  50. break;
  51. case plupload.UPLOADING:
  52. value = 'UPLOADING';
  53. break;
  54. case plupload.FAILED:
  55. value = 'FAILED';
  56. break;
  57. case plupload.DONE:
  58. value = 'DONE';
  59. break;
  60. }
  61. }
  62. if (typeof(value) != "function") {
  63. row += (row ? ', ': '') + key + '=' + value;
  64. }
  65. });
  66. str += row + " ";
  67. } else {
  68. str += arg + " ";
  69. }
  70. });
  71. $('#log').val($('#log').val() + str + "\r\n");
  72. }
  73. $("#uploader").pluploadQueue({
  74. // General settings
  75. runtimes: 'html5,gears,browserplus,silverlight,flash,html4',
  76. url: '../upload.php',
  77. max_file_size: '10mb',
  78. chunk_size: '1mb',
  79. unique_names: true,
  80. // Resize images on clientside if we can
  81. resize: {width: 320, height: 240, quality: 90},
  82. // Specify what files to browse for
  83. filters: [
  84. {title: "Image files", extensions: "jpg,gif,png"},
  85. {title: "Zip files", extensions: "zip"}
  86. ],
  87. // Flash/Silverlight paths
  88. flash_swf_url: '../../js/plupload.flash.swf',
  89. silverlight_xap_url: '../../js/plupload.silverlight.xap',
  90. // PreInit events, bound before any internal events
  91. preinit: {
  92. Init: function(up, info) {
  93. log('[Init]', 'Info:', info, 'Features:', up.features);
  94. },
  95. UploadFile: function(up, file) {
  96. log('[UploadFile]', file);
  97. // You can override settings before the file is uploaded
  98. // up.settings.url = 'upload.php?id=' + file.id;
  99. // up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
  100. }
  101. },
  102. // Post init events, bound after the internal events
  103. init: {
  104. Refresh: function(up) {
  105. // Called when upload shim is moved
  106. log('[Refresh]');
  107. },
  108. StateChanged: function(up) {
  109. // Called when the state of the queue is changed
  110. log('[StateChanged]', up.state == plupload.STARTED ? "STARTED": "STOPPED");
  111. },
  112. QueueChanged: function(up) {
  113. // Called when the files in queue are changed by adding/removing files
  114. log('[QueueChanged]');
  115. },
  116. UploadProgress: function(up, file) {
  117. // Called while a file is being uploaded
  118. log('[UploadProgress]', 'File:', file, "Total:", up.total);
  119. },
  120. FilesAdded: function(up, files) {
  121. // Callced when files are added to queue
  122. log('[FilesAdded]');
  123. plupload.each(files, function(file) {
  124. log(' File:', file);
  125. });
  126. },
  127. FilesRemoved: function(up, files) {
  128. // Called when files where removed from queue
  129. log('[FilesRemoved]');
  130. plupload.each(files, function(file) {
  131. log(' File:', file);
  132. });
  133. },
  134. FileUploaded: function(up, file, info) {
  135. // Called when a file has finished uploading
  136. log('[FileUploaded] File:', file, "Info:", info);
  137. },
  138. ChunkUploaded: function(up, file, info) {
  139. // Called when a file chunk has finished uploading
  140. log('[ChunkUploaded] File:', file, "Info:", info);
  141. },
  142. Error: function(up, args) {
  143. // Called when a error has occured
  144. // Handle file specific error and general error
  145. if (args.file) {
  146. log('[error]', args, "File:", args.file);
  147. } else {
  148. log('[error]', args);
  149. }
  150. }
  151. }
  152. });
  153. $('#log').val('');
  154. $('#clear').click(function(e) {
  155. e.preventDefault();
  156. $("#uploader").pluploadQueue().splice();
  157. });
  158. });
  159. </script>
  160. </body>
  161. </html>