upload.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <!-- Set render engine for 360 browser -->
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <!-- HTML5 shim for IE8 support of HTML5 elements -->
  10. <!--[if lt IE 9]>
  11. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  12. <![endif]-->
  13. <link href="__ADMIN_TMPL__/public/assets/themes/{:cmf_get_admin_style()}/bootstrap.min.css" rel="stylesheet">
  14. <link href="__STATIC__/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  15. <style>
  16. form .input-order {
  17. margin-bottom: 0px;
  18. padding: 0 2px;
  19. width: 42px;
  20. font-size: 12px;
  21. }
  22. form .input-order:focus {
  23. outline: none;
  24. }
  25. .table-actions {
  26. margin-top: 5px;
  27. margin-bottom: 5px;
  28. padding: 0px;
  29. }
  30. .table-list {
  31. margin-bottom: 0px;
  32. }
  33. .form-required {
  34. color: red;
  35. }
  36. </style>
  37. <script type="text/javascript">
  38. //全局变量
  39. var GV = {
  40. ROOT: "__ROOT__/",
  41. WEB_ROOT: "__WEB_ROOT__/",
  42. JS_ROOT: "static/js/",
  43. APP: '{$Request.module}'/*当前应用名*/
  44. };
  45. </script>
  46. <script src="__ADMIN_TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
  47. <script src="__STATIC__/js/wind.js"></script>
  48. <script src="__ADMIN_TMPL__/public/assets/js/bootstrap.min.js"></script>
  49. <script>
  50. var Base64 = {
  51. _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_=",
  52. encode: function (e) {
  53. var t = "";
  54. var n, r, i, s, o, u, a;
  55. var f = 0;
  56. e = Base64._utf8_encode(e);
  57. while (f < e.length) {
  58. n = e.charCodeAt(f++);
  59. r = e.charCodeAt(f++);
  60. i = e.charCodeAt(f++);
  61. s = n >> 2;
  62. o = (n & 3) << 4 | r >> 4;
  63. u = (r & 15) << 2 | i >> 6;
  64. a = i & 63;
  65. if (isNaN(r)) {
  66. u = a = 64
  67. } else if (isNaN(i)) {
  68. a = 64
  69. }
  70. t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
  71. }
  72. return t
  73. },
  74. decode: function (e) {
  75. var t = "";
  76. var n, r, i;
  77. var s, o, u, a;
  78. var f = 0;
  79. e = e.replace(/[^A-Za-z0-9+/=]/g, "");
  80. while (f < e.length) {
  81. s = this._keyStr.indexOf(e.charAt(f++));
  82. o = this._keyStr.indexOf(e.charAt(f++));
  83. u = this._keyStr.indexOf(e.charAt(f++));
  84. a = this._keyStr.indexOf(e.charAt(f++));
  85. n = s << 2 | o >> 4;
  86. r = (o & 15) << 4 | u >> 2;
  87. i = (u & 3) << 6 | a;
  88. t = t + String.fromCharCode(n);
  89. if (u != 64) {
  90. t = t + String.fromCharCode(r)
  91. }
  92. if (a != 64) {
  93. t = t + String.fromCharCode(i)
  94. }
  95. }
  96. t = Base64._utf8_decode(t);
  97. return t
  98. },
  99. _utf8_encode: function (e) {
  100. e = e.replace(/rn/g, "n");
  101. var t = "";
  102. for (var n = 0; n < e.length; n++) {
  103. var r = e.charCodeAt(n);
  104. if (r < 128) {
  105. t += String.fromCharCode(r)
  106. } else if (r > 127 && r < 2048) {
  107. t += String.fromCharCode(r >> 6 | 192);
  108. t += String.fromCharCode(r & 63 | 128)
  109. } else {
  110. t += String.fromCharCode(r >> 12 | 224);
  111. t += String.fromCharCode(r >> 6 & 63 | 128);
  112. t += String.fromCharCode(r & 63 | 128)
  113. }
  114. }
  115. return t
  116. },
  117. _utf8_decode: function (e) {
  118. var t = "";
  119. var n = 0;
  120. var r = c1 = c2 = 0;
  121. while (n < e.length) {
  122. r = e.charCodeAt(n);
  123. if (r < 128) {
  124. t += String.fromCharCode(r);
  125. n++
  126. } else if (r > 191 && r < 224) {
  127. c2 = e.charCodeAt(n + 1);
  128. t += String.fromCharCode((r & 31) << 6 | c2 & 63);
  129. n += 2
  130. } else {
  131. c2 = e.charCodeAt(n + 1);
  132. c3 = e.charCodeAt(n + 2);
  133. t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
  134. n += 3
  135. }
  136. }
  137. return t
  138. }
  139. }
  140. </script>
  141. <script>
  142. Wind.css('artDialog');
  143. Wind.css('layer');
  144. $(function () {
  145. $("[data-toggle='tooltip']").tooltip();
  146. $("li.dropdown").hover(function () {
  147. $(this).addClass("open");
  148. }, function () {
  149. $(this).removeClass("open");
  150. });
  151. });
  152. </script>
  153. <if condition="APP_DEBUG">
  154. <style>
  155. #think_page_trace_open {
  156. z-index: 9999;
  157. }
  158. </style>
  159. </if>
  160. <link rel="stylesheet" type="text/css" href="__ROOT__/static/js/webuploader/webuploader.css">
  161. <link rel="stylesheet" type="text/css" href="__ROOT__/static/js/webuploader/image-upload/style.css">
  162. <style>
  163. .state-complete .progress {
  164. display: none;
  165. }
  166. #uploader .statusBar .progress {
  167. vertical-align: middle;
  168. margin-bottom: 0;
  169. }
  170. #uploader .statusBar {
  171. padding: 0 15px;
  172. }
  173. #uploader .statusBar .info {
  174. line-height: 1.2 !important;
  175. vertical-align: middle;
  176. }
  177. </style>
  178. </head>
  179. <body class="body_none">
  180. <div class="wrap " style="padding:5px;">
  181. <ul class="nav nav-tabs">
  182. <php>
  183. $url_params=input('param.');
  184. $url_params['tab']='local';
  185. </php>
  186. <li class=""><a href="{:url('user/Asset/webuploader',$url_params)}">上传文件</a></li>
  187. <php>
  188. $url_params['tab']='url';
  189. </php>
  190. <li class=""><a href="{:url('user/Asset/webuploader',$url_params)}">网络文件</a></li>
  191. <li class="active"><a>上传到云存储</a></li>
  192. <!--<li class=""><a href="#explorer" data-toggle="tab">文件管理</a></li>-->
  193. </ul>
  194. <div class="tabbable">
  195. <div class="tab-content ">
  196. <div class="tab-pane active" id="wrapper">
  197. <div id="container">
  198. <!--头部,相册选择和格式选择-->
  199. <div id="uploader">
  200. <div class="queueList">
  201. <div id="dndArea" class="placeholder">
  202. <div id="filePicker"></div>
  203. <p>或将文件拖到这里,单次最多可选{$max_files}个文件</p>
  204. </div>
  205. </div>
  206. <div class="statusBar" style="display:none;">
  207. <div class="progress">
  208. <span class="text">0%</span>
  209. <span class="percentage"></span>
  210. </div>
  211. <div class="info"></div>
  212. <div class="btns">
  213. <div id="filePicker2"></div>
  214. <div class="uploadBtn">开始上传</div>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. <div class="tab-pane" id="B"> 请输入网络地址
  221. <div class="bk3"></div>
  222. <input type="hidden" id="img_name" value="">
  223. <input type="text" id="info" name="info[filename]" class="input form-control" value=""
  224. style="width:600px;" placeholder="http://">
  225. </div>
  226. <div class="tab-pane" id="explorer">
  227. <div class="bk3"></div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. <script src="__ROOT__/static/js/admin.js"></script>
  233. <script src="__ROOT__/static/js/webuploader/webuploader.min.js"></script>
  234. <script type="text/javascript">
  235. var httpUrl = "{:cmf_get_asset_url('')}";
  236. var filetype = '{$filetype}';
  237. function get_selected_files() {
  238. var files = [];
  239. var idPre = 'id' + new Date().getTime();
  240. if (jQuery("#wrapper").is(":hidden")) {
  241. var file = new Object();
  242. file.id = idPre + '1';
  243. file.filepath = jQuery("#info").val();
  244. file.preview_url = file.filepath;
  245. file.url = file.filepath;
  246. file.name = "";//jQuery(".filelist li .title").eq(i).html();
  247. files.push(file);
  248. } else {
  249. var number = jQuery(".filelist li").size();
  250. for (var i = 0; i < number; i++) {
  251. var file = new Object();
  252. var $file = jQuery(".filelist li").eq(i);
  253. file.id = idPre + i;
  254. file.filepath = $file.data("filepath");
  255. file.preview_url = $file.data("preview_url");//httpUrl+file.filepath;
  256. file.url = $file.data("url");
  257. file.name = $file.data("name");
  258. if (file.url == undefined) {
  259. continue;
  260. } else {
  261. files.push(file);
  262. }
  263. }
  264. }
  265. return files;
  266. }
  267. var multi = {$multi};//是否允许同时选多个文件
  268. var maxFiles = {$max_files};//允许上传多少文件
  269. var fileErrorMsg = {};
  270. var fileCtxes = {};
  271. (function ($) {
  272. // 当domReady的时候开始初始化
  273. $(function () {
  274. var $wrap = $('#uploader'),
  275. // 图片容器
  276. $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList')),
  277. // 状态栏,包括进度和控制按钮
  278. $statusBar = $wrap.find('.statusBar'),
  279. // 文件总体选择信息。
  280. $info = $statusBar.find('.info'),
  281. // 上传按钮
  282. $upload = $wrap.find('.uploadBtn').hide(),
  283. // 没选择文件之前的内容。
  284. $placeHolder = $wrap.find('.placeholder'),
  285. $progress = $statusBar.find('.progress').hide(),
  286. // 添加的文件数量
  287. fileCount = 0,
  288. // 添加的文件总大小
  289. fileSize = 0,
  290. // 优化retina, 在retina下这个值是2
  291. ratio = window.devicePixelRatio || 1,
  292. // 缩略图大小
  293. thumbnailWidth = 110 * ratio,
  294. thumbnailHeight = 110 * ratio,
  295. // 可能有pedding, ready, uploading, confirm, done.
  296. state = 'pedding',
  297. // 所有文件的进度信息,key为file id
  298. percentages = {},
  299. // 判断浏览器是否支持图片的base64
  300. isSupportBase64 = (function () {
  301. var data = new Image();
  302. var support = true;
  303. data.onload = data.onerror = function () {
  304. if (this.width != 1 || this.height != 1) {
  305. support = false;
  306. }
  307. }
  308. data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  309. return support;
  310. })(),
  311. // 检测是否已经安装flash,检测flash的版本
  312. flashVersion = (function () {
  313. var version;
  314. try {
  315. version = navigator.plugins['Shockwave Flash'];
  316. version = version.description;
  317. } catch (ex) {
  318. try {
  319. version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');
  320. } catch (ex2) {
  321. version = '0.0';
  322. }
  323. }
  324. version = version.match(/\d+/g);
  325. return parseFloat(version[0] + '.' + version[1], 10);
  326. })(),
  327. supportTransition = (function () {
  328. var s = document.createElement('p').style,
  329. r = 'transition' in s ||
  330. 'WebkitTransition' in s ||
  331. 'MozTransition' in s ||
  332. 'msTransition' in s ||
  333. 'OTransition' in s;
  334. s = null;
  335. return r;
  336. })(),
  337. // WebUploader实例
  338. uploader;
  339. if (!WebUploader.Uploader.support('flash') && WebUploader.browser.ie) {
  340. // flash 安装了但是版本过低。
  341. if (flashVersion) {
  342. (function (container) {
  343. window['expressinstallcallback'] = function (state) {
  344. switch (state) {
  345. case 'Download.Cancelled':
  346. alert('您取消了更新!')
  347. break;
  348. case 'Download.Failed':
  349. alert('安装失败')
  350. break;
  351. default:
  352. alert('安装已成功,请刷新!');
  353. break;
  354. }
  355. delete window['expressinstallcallback'];
  356. };
  357. var swf = './expressInstall.swf';
  358. // insert flash object
  359. var html = '<object type="application/' +
  360. 'x-shockwave-flash" data="' + swf + '" ';
  361. if (WebUploader.browser.ie) {
  362. html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
  363. }
  364. html += 'width="100%" height="100%" style="outline:0">' +
  365. '<param name="movie" value="' + swf + '" />' +
  366. '<param name="wmode" value="transparent" />' +
  367. '<param name="allowscriptaccess" value="always" />' +
  368. '</object>';
  369. container.html(html);
  370. })($wrap);
  371. // 压根就没有安转。
  372. } else {
  373. $wrap.html('<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img alt="get flash player" src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg" /></a>');
  374. }
  375. return;
  376. } else if (!WebUploader.Uploader.support()) {
  377. alert('Web Uploader 不支持您的浏览器!');
  378. return;
  379. }
  380. // in queue picker
  381. WebUploader.Uploader.register({
  382. 'add-file': function (files) {
  383. },
  384. 'before-send': function (block) {
  385. var server = '//{$upload_host}/mkblk/' + block.blob.size;
  386. uploader.option('server', server);
  387. }
  388. });
  389. // 实例化
  390. uploader = WebUploader.create({
  391. pick: {
  392. id: '#filePicker',
  393. label: '点击选择文件',
  394. multiple: multi,
  395. },
  396. timeout: 0,
  397. formData: {},
  398. headers: {
  399. Authorization: 'UpToken {$qiniu_up_token}'
  400. },
  401. accept: {
  402. extensions: '{$extensions}'
  403. },
  404. dnd: '#dndArea',
  405. paste: '#uploader',
  406. swf: GV.WEB_ROOT + GV.JS_ROOT + 'webuploader/Uploader.swf',
  407. chunked: true,//开启分片
  408. auto: true,
  409. chunkSize: 4 * 1024 * 1024,// 单位B
  410. compress: false,
  411. server: "//{$upload_host}/mkblk/4194304",
  412. // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
  413. disableGlobalDnd: true,
  414. threads: 1,
  415. fileNumLimit: maxFiles,
  416. runtimeOrder: 'html5,flash',
  417. sendAsBinary: true,
  418. //fileSizeLimit: 200 * 1024 * 1024, // 200 M
  419. fileSingleSizeLimit: {$upload_max_filesize} // 单位B
  420. });
  421. // 拖拽时不接受 js, txt 文件。
  422. uploader.on('dndAccept', function (items) {
  423. var denied = false,
  424. len = items.length,
  425. i = 0,
  426. // 修改js类型
  427. unAllowed = 'text/plain;application/javascript ';
  428. for (; i < len; i++) {
  429. // 如果在列表里面
  430. if (~unAllowed.indexOf(items[i].type)) {
  431. denied = true;
  432. break;
  433. }
  434. }
  435. return !denied;
  436. });
  437. // uploader.on('filesQueued', function() {
  438. // uploader.sort(function( a, b ) {
  439. // if ( a.name < b.name )
  440. // return -1;
  441. // if ( a.name > b.name )
  442. // return 1;
  443. // return 0;
  444. // });
  445. // });
  446. if (maxFiles > 1) {
  447. // 添加“添加文件”的按钮,
  448. uploader.addButton({
  449. id: '#filePicker2',
  450. label: '继续添加'
  451. });
  452. }
  453. uploader.on('ready', function () {
  454. window.uploader = uploader;
  455. });
  456. // 当有文件添加进来时执行,负责view的创建
  457. function addFile(file) {
  458. var $li = $('<li id="' + file.id + '">' +
  459. '<p class="title">' + file.name + '</p>' +
  460. '<p class="imgWrap"></p>' +
  461. '<p class="progress"><span></span></p>' +
  462. '</li>'),
  463. $btns = $('<div class="file-panel">' +
  464. '<span class="cancel">删除</span>' +
  465. '<span class="rotateRight">向右旋转</span>' +
  466. '<span class="rotateLeft">向左旋转</span></div>').appendTo($li),
  467. $prgress = $li.find('p.progress span'),
  468. $wrap = $li.find('p.imgWrap'),
  469. $info = $('<p class="error"></p>'),
  470. showError = function (code) {
  471. switch (code) {
  472. case 'exceed_size':
  473. text = '文件大小超出';
  474. break;
  475. case 'interrupt':
  476. text = '上传暂停';
  477. break;
  478. default:
  479. text = '上传失败,请重试';
  480. break;
  481. }
  482. $info.text(text).appendTo($li);
  483. };
  484. if (file.getStatus() === 'invalid') {
  485. showError(file.statusText);
  486. } else {
  487. // @todo lazyload
  488. $wrap.text('预览中');
  489. uploader.makeThumb(file, function (error, src) {
  490. var img;
  491. if (error) {
  492. $wrap.text('不能预览');
  493. return;
  494. }
  495. if (isSupportBase64) {
  496. img = $('<img src="' + src + '">');
  497. $wrap.empty().append(img);
  498. } else {
  499. $.ajax('../../server/preview.php', {
  500. method: 'POST',
  501. data: src,
  502. dataType: 'json'
  503. }).done(function (response) {
  504. if (response.result) {
  505. img = $('<img src="' + response.result + '">');
  506. $wrap.empty().append(img);
  507. } else {
  508. $wrap.text("预览出错");
  509. }
  510. });
  511. }
  512. }, thumbnailWidth, thumbnailHeight);
  513. percentages[file.id] = [file.size, 0];
  514. file.rotation = 0;
  515. }
  516. file.on('statuschange', function (cur, prev) {
  517. if (prev === 'progress') {
  518. $prgress.hide().width(0);
  519. } else if (prev === 'queued') {
  520. $li.off('mouseenter mouseleave');
  521. $btns.remove();
  522. }
  523. // 成功
  524. if (cur === 'error' || cur === 'invalid') {
  525. showError(file.statusText);
  526. percentages[file.id][1] = 1;
  527. } else if (cur === 'interrupt') {
  528. showError('interrupt');
  529. } else if (cur === 'queued') {
  530. percentages[file.id][1] = 0;
  531. } else if (cur === 'progress') {
  532. $info.remove();
  533. $prgress.css('display', 'block');
  534. } else if (cur === 'complete') {
  535. $li.append('<span class="success"></span>');
  536. }
  537. $li.removeClass('state-' + prev).addClass('state-' + cur);
  538. });
  539. $li.on('mouseenter', function () {
  540. $btns.stop().animate({height: 30});
  541. });
  542. $li.on('mouseleave', function () {
  543. $btns.stop().animate({height: 0});
  544. });
  545. $btns.on('click', 'span', function () {
  546. var index = $(this).index(),
  547. deg;
  548. switch (index) {
  549. case 0:
  550. uploader.removeFile(file);
  551. return;
  552. case 1:
  553. file.rotation += 90;
  554. break;
  555. case 2:
  556. file.rotation -= 90;
  557. break;
  558. }
  559. if (supportTransition) {
  560. deg = 'rotate(' + file.rotation + 'deg)';
  561. $wrap.css({
  562. '-webkit-transform': deg,
  563. '-mos-transform': deg,
  564. '-o-transform': deg,
  565. 'transform': deg
  566. });
  567. } else {
  568. $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
  569. // use jquery animate to rotation
  570. // $({
  571. // rotation: rotation
  572. // }).animate({
  573. // rotation: file.rotation
  574. // }, {
  575. // easing: 'linear',
  576. // step: function( now ) {
  577. // now = now * Math.PI / 180;
  578. // var cos = Math.cos( now ),
  579. // sin = Math.sin( now );
  580. // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
  581. // }
  582. // });
  583. }
  584. });
  585. $li.appendTo($queue);
  586. }
  587. // 负责view的销毁
  588. function removeFile(file) {
  589. var $li = $('#' + file.id);
  590. delete percentages[file.id];
  591. updateTotalProgress();
  592. $li.off().find('.file-panel').off().end().remove();
  593. }
  594. function updateTotalProgress() {
  595. var loaded = 0,
  596. total = 0,
  597. spans = $progress.children(),
  598. percent;
  599. $.each(percentages, function (k, v) {
  600. total += v[0];
  601. loaded += v[0] * v[1];
  602. });
  603. percent = total ? loaded / total : 0;
  604. spans.eq(0).text(Math.round(percent * 100) + '%');
  605. spans.eq(1).css('width', Math.round(percent * 100) + '%');
  606. updateStatus();
  607. }
  608. function updateStatus() {
  609. var text = '', stats;
  610. if (state === 'ready') {
  611. text = '选中' + fileCount + '个文件,共' +
  612. WebUploader.formatSize(fileSize) + '。';
  613. } else if (state === 'confirm') {
  614. stats = uploader.getStats();
  615. if (stats.uploadFailNum) {
  616. text = '已成功上传' + stats.successNum + '个文件,' +
  617. stats.uploadFailNum + '个文件上传失败,<a class="retry" href="#">重新上传</a>失败文件或<a class="ignore" href="#">忽略</a>'
  618. }
  619. } else {
  620. stats = uploader.getStats();
  621. text = '共' + fileCount + '个文件(' +
  622. WebUploader.formatSize(fileSize) +
  623. '),已上传' + stats.successNum + '个';
  624. if (stats.uploadFailNum) {
  625. text += ',失败' + stats.uploadFailNum + '个';
  626. }
  627. if (stats.progressNum > 0) {
  628. text += '<br>上传期间请不要关闭对话框';
  629. }
  630. }
  631. $info.html(text);
  632. }
  633. function setState(val) {
  634. var file, stats;
  635. if (val === state) {
  636. return;
  637. }
  638. $upload.removeClass('state-' + state);
  639. $upload.addClass('state-' + val);
  640. state = val;
  641. switch (state) {
  642. case 'pedding':
  643. $placeHolder.removeClass('element-invisible');
  644. $queue.hide();
  645. $statusBar.addClass('element-invisible');
  646. uploader.refresh();
  647. break;
  648. case 'ready':
  649. $placeHolder.addClass('element-invisible');
  650. $('#filePicker2').removeClass('element-invisible');
  651. $queue.show();
  652. $statusBar.removeClass('element-invisible');
  653. uploader.refresh();
  654. break;
  655. case 'uploading':
  656. $('#filePicker2').addClass('element-invisible');
  657. $progress.show();
  658. $upload.text('暂停上传');
  659. break;
  660. case 'paused':
  661. $progress.show();
  662. $upload.text('继续上传');
  663. break;
  664. case 'confirm':
  665. $progress.hide();
  666. $('#filePicker2').removeClass('element-invisible');
  667. $upload.text('开始上传');
  668. stats = uploader.getStats();
  669. if (stats.successNum && !stats.uploadFailNum) {
  670. //setState('finish');
  671. return;
  672. }
  673. break;
  674. case 'finish':
  675. stats = uploader.getStats();
  676. if (stats.successNum) {
  677. //alert( '上传成功' );
  678. } else {
  679. // 没有成功的图片,重设
  680. state = 'done';
  681. location.reload();
  682. }
  683. break;
  684. }
  685. updateStatus();
  686. }
  687. uploader.onUploadProgress = function (file, percentage) {
  688. var $li = $('#' + file.id),
  689. $percent = $li.find('.progress span');
  690. console.log(file);
  691. console.error('percentage:' + percentage);
  692. $percent.css('width', percentage * 100 + '%');
  693. percentages[file.id][1] = percentage;
  694. updateTotalProgress();
  695. };
  696. uploader.onFileQueued = function (file) {
  697. fileCount++;
  698. fileSize += file.size;
  699. if (fileCount === 1) {
  700. $placeHolder.addClass('element-invisible');
  701. $statusBar.show();
  702. }
  703. addFile(file);
  704. setState('ready');
  705. updateTotalProgress();
  706. };
  707. uploader.onFileDequeued = function (file) {
  708. fileCount--;
  709. fileSize -= file.size;
  710. if (!fileCount) {
  711. setState('pedding');
  712. }
  713. removeFile(file);
  714. updateTotalProgress();
  715. };
  716. uploader.on('all', function (type, file, msg) {
  717. var stats;
  718. switch (type) {
  719. case 'uploadSuccess':
  720. if (msg._raw != '') {
  721. console.log(file);
  722. $.ajax({
  723. url: '//{$upload_host}/mkfile/' + file.size,
  724. type: 'POST',
  725. dataType: 'json',
  726. contentType: 'text/plain',
  727. data: fileCtxes[file.id].join(','),
  728. headers: {Authorization: 'UpToken {$qiniu_up_token}'},
  729. success: function (data) {
  730. var $file = jQuery("#" + file.id);
  731. $file.data("name", file.name);
  732. $.ajax({
  733. url: "{:cmf_plugin_url('Qiniu://Asset/getUrl')}",
  734. type: 'POST',
  735. dataType: 'json',
  736. data: {
  737. filename: file.name,
  738. filetype: filetype,
  739. file: data.key,
  740. file_hash: data.hash
  741. },
  742. success: function (data2) {
  743. $file.data("url", data2.data.url);
  744. $file.data("preview_url", data2.data.preview_url);
  745. $file.data("filepath", data2.data.filepath);
  746. },
  747. error: function () {
  748. }
  749. });
  750. $.ajax({
  751. url: "{:cmf_plugin_url('Qiniu://Asset/saveFile')}",
  752. type: 'POST',
  753. dataType: 'json',
  754. data: {
  755. filename: file.name,
  756. file_key: data.hash
  757. },
  758. success: function (data3) {
  759. },
  760. error: function () {
  761. },
  762. complete: function () {
  763. setState('finish');
  764. }
  765. });
  766. },
  767. error: function () {
  768. }
  769. });
  770. }
  771. break;
  772. case 'uploadFinished':
  773. setState('confirm');
  774. break;
  775. case 'startUpload':
  776. setState('uploading');
  777. break;
  778. case 'stopUpload':
  779. setState('paused');
  780. break;
  781. }
  782. });
  783. uploader.on("uploadAccept", function (object, ret) {
  784. console.log(ret);
  785. if (ret.ctx) {
  786. if (!fileCtxes[object.file.id]) {
  787. fileCtxes[object.file.id] = [];
  788. }
  789. fileCtxes[object.file.id].push(ret.ctx);
  790. return true;
  791. } else {
  792. return false;
  793. }
  794. });
  795. uploader.on('uploadError', function (file, reason) {
  796. if (reason == 'server') {
  797. $('#' + file.id).find('p.error').text(fileErrorMsg[file.id]);
  798. }
  799. });
  800. uploader.onError = function (code) {
  801. switch (code) {
  802. case "Q_TYPE_DENIED":
  803. code = "文件类型错误!";
  804. break;
  805. case "Q_EXCEED_NUM_LIMIT":
  806. code = "最多只能上传" + maxFiles + '个文件';
  807. break;
  808. case "F_DUPLICATE":
  809. code = "文件重复添加!";
  810. break;
  811. case "F_EXCEED_SIZE":
  812. code = "您需要选择小于{$upload_max_filesize_mb}M的文件!";
  813. break;
  814. }
  815. alert(code);
  816. };
  817. $upload.on('click', function () {
  818. if ($(this).hasClass('disabled')) {
  819. return false;
  820. }
  821. if (state === 'ready') {
  822. uploader.upload();
  823. } else if (state === 'paused') {
  824. uploader.upload();
  825. } else if (state === 'uploading') {
  826. uploader.stop();
  827. }
  828. });
  829. $info.on('click', '.retry', function () {
  830. uploader.retry();
  831. });
  832. $info.on('click', '.ignore', function () {
  833. alert('todo');
  834. });
  835. $upload.addClass('state-' + state);
  836. updateTotalProgress();
  837. });
  838. })(jQuery);
  839. </script>
  840. </body>
  841. </html>