videoupload.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  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>jQuery多文件上传插件 Plupload</title>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
  7. <script type="text/javascript" src="https://blueimp.github.io/JavaScript-MD5/js/md5.js"></script>
  8. <script src="{{rootUrl}}global/js/sha1.js"></script>
  9. <script type="text/javascript" src="{{rootUrl}}global/js/videoupload.js"></script>
  10. </head>
  11. <body>
  12. <p>UpLoad: <input type="file" name="file" id="inputid"/></p>
  13. <p>UpLoad: <input type="button" name="uploadid" id="uploadid" value="shangchuang"/></p>
  14. <script>
  15. $(function(){
  16. var opt = {
  17. fileInputId: 'inputid',
  18. fileUploadId: 'uploadid'
  19. };
  20. Uploader(opt).init();
  21. })
  22. </script>
  23. </body>
  24. </html>
  25. <!--<!DOCTYPE html>-->
  26. <!--<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">-->
  27. <!--<head>-->
  28. <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>-->
  29. <!--<title>jQuery多文件上传插件 Plupload</title>-->
  30. <!--</head>-->
  31. <!--<body>-->
  32. <!--<form action="/upload4" enctype="multipart/form-data" method="post">-->
  33. <!--<p>UpLoad: <input type="text" name="name" /></p>-->
  34. <!--<p>UpLoad: <input type="file" name="file" /></p>-->
  35. <!--<input type="submit" value="Submit" />-->
  36. <!--</form>-->
  37. <!--</body>-->
  38. <!--</html>-->
  39. <!--<!DOCTYPE html>-->
  40. <!--<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">-->
  41. <!--<head>-->
  42. <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>-->
  43. <!--<title>jQuery多文件上传插件 Plupload</title>-->
  44. <!--<link type="text/css" rel="stylesheet" href="{{rootUrl}}global/jquery-ui/jquery-ui.min.css" media="screen" />-->
  45. <!--<link type="text/css" rel="stylesheet" href="{{rootUrl}}global/js/jquery.ui.plupload/css/jquery.ui.plupload.css" media="screen" />-->
  46. <!--<style>-->
  47. <!--body{background:#fff;}-->
  48. <!--#uploader{max-width:800px;margin:50px auto;}-->
  49. <!--</style>-->
  50. <!--&lt;!&ndash;[if lte IE 7]>-->
  51. <!--<style>-->
  52. <!--#main-menu {-->
  53. <!--position: absolute;-->
  54. <!--position: fixed;-->
  55. <!--}-->
  56. <!--.menu-item {-->
  57. <!--float: left;-->
  58. <!--}-->
  59. <!--.span4 {-->
  60. <!--float: left;-->
  61. <!--}-->
  62. <!--.clearfix {-->
  63. <!--clear: both;-->
  64. <!--}-->
  65. <!--.btn {-->
  66. <!--zoom: 1;-->
  67. <!--}-->
  68. <!--</style>-->
  69. <!--<![endif]&ndash;&gt;-->
  70. <!--&lt;!&ndash;[if lt IE 9]>-->
  71. <!--<script src="{{rootUrl}}global/js/html5shiv.js"></script>-->
  72. <!--<![endif]&ndash;&gt;-->
  73. <!--</head>-->
  74. <!--<body>-->
  75. <!--<div id="uploader">-->
  76. <!--<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>-->
  77. <!--</div>-->
  78. <!--<script type="text/javascript" src="{{rootUrl}}global/js/jquery-1.9.1.min.js" charset="UTF-8"></script>-->
  79. <!--<script type="text/javascript" src="{{rootUrl}}global/jquery-ui/jquery-ui.min.js" charset="UTF-8"></script>-->
  80. <!--<script type="text/javascript" src="{{rootUrl}}global/js/plupload.full.min.js" charset="UTF-8"></script>-->
  81. <!--<script type="text/javascript" src="{{rootUrl}}global/js/jquery.ui.plupload/jquery.ui.plupload.min.js" charset="UTF-8"></script>-->
  82. <!--<script type="text/javascript" src="{{rootUrl}}global/js/i18n/zh_CN.js" charset="UTF-8"></script>-->
  83. <!--<script type="text/javascript">-->
  84. <!--$(function() {-->
  85. <!--$("#uploader").plupload({-->
  86. <!--// General settings-->
  87. <!--runtimes : 'html5,flash,silverlight,html4',-->
  88. <!--url : '/upload3',-->
  89. <!--// max_file_size : '2mb',//最大文件大小-->
  90. <!--max_file_count: 20,//最大文件数量-->
  91. <!--chunk_size: '3mb',-->
  92. <!--// Resize images on clientside if we can-->
  93. <!--// resize : {-->
  94. <!--// width : 200,-->
  95. <!--// height : 200,-->
  96. <!--// quality : 90,-->
  97. <!--// crop: true // crop to exact dimensions-->
  98. <!--// },-->
  99. <!--// Specify what files to browse for-->
  100. <!--filters : [-->
  101. <!--// {title : "图片文件", extensions : "jpg,gif,png"},-->
  102. <!--// {title : "压缩文件", extensions : "zip,rar"},-->
  103. <!--{title : "视频文件", extensions : "Avi,MP4"}-->
  104. <!--],-->
  105. <!--// Rename files by clicking on their titles-->
  106. <!--rename: true,-->
  107. <!--// Sort files-->
  108. <!--sortable: true,-->
  109. <!--// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)-->
  110. <!--dragdrop: true,-->
  111. <!--// Views to activate-->
  112. <!--// views: {-->
  113. <!--// list: true,-->
  114. <!--// thumbs: true, // Show thumbs-->
  115. <!--// active: 'thumbs'-->
  116. <!--// },-->
  117. <!--// Flash settings-->
  118. <!--flash_swf_url : '{{rootUrl}}global/js/Moxie.swf',-->
  119. <!--// Silverlight settings-->
  120. <!--silverlight_xap_url : '{{rootUrl}}global/js/Moxie.xap'-->
  121. <!--});-->
  122. <!--});-->
  123. <!--</script>-->
  124. <!--</body>-->
  125. <!--</html>-->
  126. <!--<!DOCTYPE html>-->
  127. <!--<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">-->
  128. <!--<head>-->
  129. <!--<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>-->
  130. <!--<title>Plupload - Events example</title>-->
  131. <!--&lt;!&ndash; production &ndash;&gt;-->
  132. <!--<script type="text/javascript" src="{{rootUrl}}global/js/plupload.full.min.js"></script>-->
  133. <!--&lt;!&ndash; debug-->
  134. <!--<script type="text/javascript" src="{{rootUrl}}global/js/moxie.js"></script>-->
  135. <!--<script type="text/javascript" src="{{rootUrl}}global/js/plupload.dev.js"></script>-->
  136. <!--&ndash;&gt;-->
  137. <!--</head>-->
  138. <!--<body style="font: 13px Verdana; background: #eee; color: #333">-->
  139. <!--<h1>Events example</h1>-->
  140. <!--<div id="container">-->
  141. <!--<a id="pickfiles" href="javascript:;">[Select files]</a>-->
  142. <!--<a id="uploadfiles" href="javascript:;">[Upload files]</a>-->
  143. <!--</div>-->
  144. <!--<br />-->
  145. <!--<pre id="console"></pre>-->
  146. <!-- -->
  147. <!--<script type="text/javascript">-->
  148. <!--var uploader = new plupload.Uploader({-->
  149. <!--// General settings-->
  150. <!--runtimes : 'html5',-->
  151. <!--browse_button : 'pickfiles', // you can pass in id...-->
  152. <!--url : '/upload3',-->
  153. <!--// multipart: false,-->
  154. <!--chunk_size : '3mb',-->
  155. <!--unique_names : true,-->
  156. <!--// Resize images on client-side if we can-->
  157. <!--// resize : { width : 320, height : 240, quality : 90 },-->
  158. <!--filters : {-->
  159. <!--//             max_file_size : '10mb',-->
  160. <!--// Specify what files to browse for-->
  161. <!--mime_types: [-->
  162. <!--// {title : "Image files", extensions : "jpg,gif,png"},-->
  163. <!--// {title : "Zip files", extensions : "zip"},-->
  164. <!--{title : "Video files", extensions : "mp4,avi,flv,rmvb"}-->
  165. <!--],-->
  166. <!--prevent_duplicates : true-->
  167. <!--},-->
  168. <!--flash_swf_url : '{{rootUrl}}global/js/Moxie.swf',-->
  169. <!--silverlight_xap_url : '{{rootUrl}}global/js/Moxie.xap',-->
  170. <!--// PreInit events, bound before the internal events-->
  171. <!--preinit : {-->
  172. <!--Init: function(up, info) {-->
  173. <!--log('[Init]', 'Info:', info, 'Features:', up.features);-->
  174. <!--},-->
  175. <!--UploadFile: function(up, file) {-->
  176. <!--log('[UploadFile]', file);-->
  177. <!--// You can override settings before the file is uploaded-->
  178. <!--// up.setOption('url', 'upload.php?id=' + file.id);-->
  179. <!--// up.setOption('multipart_params', {param1 : 'value1', param2 : 'value2'});-->
  180. <!--}-->
  181. <!--},-->
  182. <!--// Post init events, bound after the internal events-->
  183. <!--init : {-->
  184. <!--PostInit: function() {-->
  185. <!--// Called after initialization is finished and internal event handlers bound-->
  186. <!--log('[PostInit]');-->
  187. <!--document.getElementById('uploadfiles').onclick = function() {-->
  188. <!--uploader.start();-->
  189. <!--return false;-->
  190. <!--};-->
  191. <!--},-->
  192. <!--Browse: function(up) {-->
  193. <!--// Called when file picker is clicked-->
  194. <!--log('[Browse]');-->
  195. <!--},-->
  196. <!--Refresh: function(up) {-->
  197. <!--// Called when the position or dimensions of the picker change-->
  198. <!--log('[Refresh]');-->
  199. <!--},-->
  200. <!--StateChanged: function(up) {-->
  201. <!--// Called when the state of the queue is changed-->
  202. <!--log('[StateChanged]', up.state == plupload.STARTED ? "STARTED" : "STOPPED");-->
  203. <!--},-->
  204. <!--QueueChanged: function(up) {-->
  205. <!--// Called when queue is changed by adding or removing files-->
  206. <!--log('[QueueChanged]');-->
  207. <!--},-->
  208. <!--OptionChanged: function(up, name, value, oldValue) {-->
  209. <!--// Called when one of the configuration options is changed-->
  210. <!--log('[OptionChanged]', 'Option Name: ', name, 'Value: ', value, 'Old Value: ', oldValue);-->
  211. <!--},-->
  212. <!--BeforeUpload: function(up, file) {-->
  213. <!--// Called right before the upload for a given file starts, can be used to cancel it if required-->
  214. <!--log('[BeforeUpload]', 'File: ', file);-->
  215. <!--},-->
  216. <!--UploadProgress: function(up, file) {-->
  217. <!--// Called while file is being uploaded-->
  218. <!--log('[UploadProgress]', 'File:', file, "Total:", up.total);-->
  219. <!--},-->
  220. <!--FileFiltered: function(up, file) {-->
  221. <!--// Called when file successfully files all the filters-->
  222. <!--log('[FileFiltered]', 'File:', file);-->
  223. <!--},-->
  224. <!--FilesAdded: function(up, files) {-->
  225. <!--// Called when files are added to queue-->
  226. <!--log('[FilesAdded]');-->
  227. <!--plupload.each(files, function(file) {-->
  228. <!--log('  File:', file);-->
  229. <!--});-->
  230. <!--},-->
  231. <!--FilesRemoved: function(up, files) {-->
  232. <!--// Called when files are removed from queue-->
  233. <!--log('[FilesRemoved]');-->
  234. <!--plupload.each(files, function(file) {-->
  235. <!--log('  File:', file);-->
  236. <!--});-->
  237. <!--},-->
  238. <!--FileUploaded: function(up, file, info) {-->
  239. <!--// Called when file has finished uploading-->
  240. <!--log('[FileUploaded] File:', file, "Info:", info);-->
  241. <!--},-->
  242. <!--ChunkUploaded: function(up, file, info) {-->
  243. <!--// Called when file chunk has finished uploading-->
  244. <!--log('[ChunkUploaded] File:', file, "Info:", info);-->
  245. <!--},-->
  246. <!--UploadComplete: function(up, files) {-->
  247. <!--// Called when all files are either uploaded or failed-->
  248. <!--log('[UploadComplete]');-->
  249. <!--},-->
  250. <!--Destroy: function(up) {-->
  251. <!--// Called when uploader is destroyed-->
  252. <!--log('[Destroy] ');-->
  253. <!--},-->
  254. <!--Error: function(up, args) {-->
  255. <!--// Called when error occurs-->
  256. <!--log('[Error] ', args);-->
  257. <!--}-->
  258. <!--}-->
  259. <!--});-->
  260. <!--function log() {-->
  261. <!--var str = "";-->
  262. <!--plupload.each(arguments, function(arg) {-->
  263. <!--var row = "";-->
  264. <!--if (typeof(arg) != "string") {-->
  265. <!--plupload.each(arg, function(value, key) {-->
  266. <!--// Convert items in File objects to human readable form-->
  267. <!--if (arg instanceof plupload.File) {-->
  268. <!--// Convert status to human readable-->
  269. <!--switch (value) {-->
  270. <!--case plupload.QUEUED:-->
  271. <!--value = 'QUEUED';-->
  272. <!--break;-->
  273. <!--case plupload.UPLOADING:-->
  274. <!--value = 'UPLOADING';-->
  275. <!--break;-->
  276. <!--case plupload.FAILED:-->
  277. <!--value = 'FAILED';-->
  278. <!--break;-->
  279. <!--case plupload.DONE:-->
  280. <!--value = 'DONE';-->
  281. <!--break;-->
  282. <!--}-->
  283. <!--}-->
  284. <!--if (typeof(value) != "function") {-->
  285. <!--row += (row ? ', ' : '') + key + '=' + value;-->
  286. <!--}-->
  287. <!--});-->
  288. <!--str += row + " ";-->
  289. <!--} else {-->
  290. <!--str += arg + " ";-->
  291. <!--}-->
  292. <!--});-->
  293. <!--var log = document.getElementById('console');-->
  294. <!--log.innerHTML += str + "\n";-->
  295. <!--}-->
  296. <!--uploader.init();-->
  297. <!--</script>-->
  298. <!--</body>-->
  299. <!--</html>-->