upload.js 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055
  1. (function (w, $) {
  2. function Uploader(opts) {
  3. opts = $.extend({
  4. wrapper: '.web-uploader', // 图片显示容器选择器
  5. addFileButton: '.add-file-button', // 继续添加按钮选择器
  6. isImage: false,
  7. preview: [], // 数据预览
  8. server: '',
  9. updateServer: '',
  10. deleteUrl: '',
  11. deleteData: {},
  12. thumbHeight: 160,
  13. disabled: false, // 禁止任何上传编辑
  14. autoUpdateColumn: false,
  15. disableRemove: false, // 禁止删除图片,允许替换
  16. dimensions: {
  17. // width: 100, // 图片宽限制
  18. // height: 100, // 图片高限制
  19. // min_width: 100, //
  20. // min_height: 100,
  21. // max_width: 100,
  22. // max_height: 100,
  23. // ratio: 3/2, // 宽高比
  24. },
  25. lang: {
  26. exceed_size: '文件大小超出',
  27. interrupt: '上传暂停',
  28. upload_failed: '上传失败,请重试',
  29. selected_files: '选中:num个文件,共:size。',
  30. selected_has_failed: '已成功上传:success个文件,:fail个文件上传失败,<a class="retry" href="javascript:"";">重新上传</a>失败文件或<a class="ignore" href="javascript:"";">忽略</a>',
  31. selected_success: '共:num个(:size),已上传:success个。',
  32. dot: ',',
  33. failed_num: '失败:fail个。',
  34. pause_upload: '暂停上传',
  35. go_on_upload: '继续上传',
  36. start_upload: '开始上传',
  37. upload_success_message: '已成功上传:success个文件',
  38. go_on_add: '继续添加',
  39. Q_TYPE_DENIED: '对不起,不允许上传此类型文件',
  40. Q_EXCEED_NUM_LIMIT: '对不起,已超出文件上传数量限制,最多只能上传:num个文件',
  41. F_EXCEED_SIZE: '对不起,当前选择的文件过大',
  42. Q_EXCEED_SIZE_LIMIT: '对不起,已超出文件大小限制',
  43. F_DUPLICATE: '文件重复',
  44. confirm_delete_file: '您确定要删除这个文件吗?',
  45. },
  46. upload: { // web-uploader配置
  47. formData: {
  48. _id: null, // 唯一id
  49. },
  50. thumb: {
  51. width: 160,
  52. height: 160,
  53. quality: 70,
  54. allowMagnify: true,
  55. crop: true,
  56. preserveHeaders: false,
  57. // 为空的话则保留原有图片格式。
  58. // 否则强制转换成指定的类型。
  59. // IE 8下面 base64 大小不能超过 32K 否则预览失败,而非 jpeg 编码的图片很可
  60. // 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
  61. type: 'image/jpeg'
  62. },
  63. }
  64. }, opts);
  65. var $selector = $(opts.selector),
  66. updateColumn = opts.upload.formData.upload_column || ('webup' + Math.floor(Math.random()*10000)),
  67. elementName = opts.elementName;
  68. if (typeof opts.upload.formData._id == "undefined" || !opts.upload.formData._id) {
  69. opts.upload.formData._id = updateColumn + Math.floor(Math.random()*10000);
  70. }
  71. let Dcat = w.Dcat,
  72. $wrap,
  73. // 展示图片
  74. showImg = opts.isImage,
  75. // 图片容器
  76. $queue,
  77. // 状态栏,包括进度和控制按钮
  78. $statusBar,
  79. // 文件总体选择信息。
  80. $info,
  81. // 上传按钮
  82. $upload,
  83. // 没选择文件之前的内容。
  84. $placeHolder,
  85. $progress,
  86. // 已上传文件数量
  87. originalFilesNum = Dcat.helpers.len(opts.preview),
  88. // 上传表单
  89. $input = $selector.find('input[name="' + elementName + '"]'),
  90. // 获取文件视图选择器
  91. getFileViewSelector = function (fileId) {
  92. return elementName.replace(/[\[\]]*/g, '_')+'-'+fileId;
  93. },
  94. getFileView = function (fileId) {
  95. return $('#' + getFileViewSelector(fileId));
  96. },
  97. // 继续添加按钮选择器
  98. addFileButtonSelector = opts.addFileButton,
  99. // 临时存储上传失败的文件,key为file id
  100. faildFiles = {},
  101. // 临时存储添加到form表单的文件
  102. formFiles = {},
  103. // 添加的文件数量
  104. fileCount = 0,
  105. // 添加的文件总大小
  106. fileSize = 0,
  107. // 可能有pedding, ready, uploading, confirm, done.
  108. state = 'pedding',
  109. // 所有文件的进度信息,key为file id
  110. percentages = {},
  111. // 判断浏览器是否支持图片的base64
  112. isSupportBase64 = (function () {
  113. var data = new Image();
  114. var support = true;
  115. data.onload = data.onerror = function () {
  116. if (this.width != 1 || this.height != 1) {
  117. support = false;
  118. }
  119. };
  120. data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  121. return support;
  122. })(),
  123. // 检测是否已经安装flash,检测flash的版本
  124. flashVersion = (function () {
  125. var version;
  126. try {
  127. version = navigator.plugins['Shockwave Flash'];
  128. version = version.description;
  129. } catch (ex) {
  130. try {
  131. version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
  132. .GetVariable('$version');
  133. } catch (ex2) {
  134. version = '0.0';
  135. }
  136. }
  137. version = version.match(/\d+/g);
  138. return parseFloat(version[0] + '.' + version[1], 10);
  139. })(),
  140. // 判断是否是图片
  141. isImage = function (file) {
  142. return file.type.match(/^image/);
  143. },
  144. // 翻译
  145. lang = Dcat.Translator(opts.lang),
  146. __ = lang.trans.bind(lang),
  147. // WebUploader实例
  148. uploader;
  149. // 当有文件添加进来时执行,负责view的创建
  150. function addFile(file) {
  151. var size = WebUploader.formatSize(file.size), $li, $btns;
  152. if (showImg) {
  153. $li = $(`<li id="${getFileViewSelector(file.id)}" title="${file.name}" >
  154. <p class="file-type">${(file.ext.toUpperCase() || 'FILE')}</p>
  155. <p class="imgWrap "></p>
  156. <p class="title" style="">${file.name}</p>
  157. <p class="title" style="margin-bottom:20px;">(<b>${size}</b>)</p>
  158. </li>`);
  159. $btns = $(`<div class="file-panel">
  160. <a class="btn btn-sm btn-white" data-file-act="cancel"><i class="feather icon-x red-dark" style="font-size:13px"></i></a>
  161. <a class="btn btn-sm btn-white" data-file-act="delete" style="display: none">
  162. <i class="feather icon-trash red-dark" style="font-size:13px"></i></a>
  163. <a class="btn btn-sm btn-white" data-file-act="preview" ><i class="feather icon-zoom-in"></i></a>
  164. </div>`).appendTo($li);
  165. } else {
  166. $li = $(`
  167. <li id="${getFileViewSelector(file.id)}" title="${file.nam}">
  168. <p class="title" style="display:block">
  169. <i class="feather icon-check green _success icon-success"></i>
  170. ${file.name} (${size})
  171. </p>
  172. </li>
  173. `);
  174. $btns = $(`
  175. <span data-file-act="cancel" class="file-action" style="font-size:13px">
  176. <i class="feather icon-x red-dark"></i>
  177. </span>
  178. <span data-file-act="delete" class="file-action" style="display:none">
  179. <i class="feather icon-trash red-dark"></i>
  180. </span>
  181. `).appendTo($li);
  182. }
  183. var $wrap = $li.find('p.imgWrap'),
  184. $info = $('<p class="error"></p>'),
  185. showError = function (code, file) {
  186. var text = '';
  187. switch (code) {
  188. case 'exceed_size':
  189. text = __('exceed_size');
  190. break;
  191. case 'interrupt':
  192. text = __('interrupt');
  193. break;
  194. default:
  195. text = __('upload_failed');
  196. break;
  197. }
  198. faildFiles[file.id] = file;
  199. $info.text(text).appendTo($li);
  200. };
  201. $li.appendTo($queue);
  202. setTimeout(function () {
  203. $li.css({margin: '5px'});
  204. }, 50);
  205. if (file.getStatus() === 'invalid') {
  206. showError(file.statusText, file);
  207. } else {
  208. if (showImg) {
  209. var image = uploader.makeThumb(file, function (error, src) {
  210. var img;
  211. $wrap.empty();
  212. if (error) {
  213. $li.find('.title').show();
  214. $li.find('.file-type').show();
  215. return;
  216. }
  217. if (isSupportBase64) {
  218. img = $('<img src="' + src + '">');
  219. $wrap.append(img);
  220. } else {
  221. $li.find('.file-type').show();
  222. }
  223. });
  224. try {
  225. image.once('load', function () {
  226. file._info = file._info || image.info();
  227. file._meta = file._meta || image.meta();
  228. var width = file._info.width,
  229. height = file._info.height;
  230. if (!validateDimensions(file)) {
  231. Dcat.error('The image dimensions is invalid.');
  232. uploader.removeFile(file);
  233. return false;
  234. }
  235. image.resize(width, height);
  236. });
  237. } catch (e) {
  238. // 不是图片
  239. return setTimeout(function () {
  240. uploader.removeFile(file);
  241. }, 10);
  242. }
  243. }
  244. percentages[file.id] = [file.size, 0];
  245. file.rotation = 0;
  246. }
  247. file.on('statuschange', function (cur, prev) {
  248. if (prev === 'progress') {
  249. // $prgress.hide().width(0);
  250. } else if (prev === 'queued') {
  251. $btns.find('[data-file-act="cancel"]').hide();
  252. $btns.find('[data-file-act="delete"]').show();
  253. }
  254. // 成功
  255. if (cur === 'error' || cur === 'invalid') {
  256. showError(file.statusText, file);
  257. percentages[file.id][1] = 1;
  258. } else if (cur === 'interrupt') {
  259. showError('interrupt', file);
  260. } else if (cur === 'queued') {
  261. percentages[file.id][1] = 0;
  262. } else if (cur === 'progress') {
  263. $info.remove();
  264. // $prgress.css('display', 'block');
  265. } else if (cur === 'complete') {
  266. if (showImg) {
  267. $li.append('<span class="success"><em></em><i class="feather icon-check"></i></span>');
  268. } else {
  269. $li.find('._success').show();
  270. }
  271. }
  272. $li.removeClass('state-' + prev).addClass('state-' + cur);
  273. });
  274. var $act = showImg ? $btns.find('a') : $btns;
  275. $act.on('click', function () {
  276. var index = $(this).data('file-act');
  277. switch (index) {
  278. case 'cancel':
  279. uploader.removeFile(file);
  280. return;
  281. case 'deleteurl':
  282. case 'delete':
  283. if (opts.disableRemove) {
  284. deleteInput(file.serverId);
  285. return uploader.removeFile(file);
  286. }
  287. Dcat.confirm(__('confirm_delete_file'), file.serverId, function () {
  288. var post = opts.deleteData;
  289. post.key = file.serverId;
  290. if (!post.key) {
  291. deleteInput(file.serverId);
  292. return uploader.removeFile(file);
  293. }
  294. post._column = updateColumn;
  295. Dcat.loading();
  296. $.post(opts.deleteUrl, post, function (result) {
  297. Dcat.loading(false);
  298. if (result.status) {
  299. deleteInput(file.serverId);
  300. uploader.removeFile(file);
  301. return;
  302. }
  303. Dcat.error(result.message || 'Remove file failed.');
  304. });
  305. });
  306. break;
  307. case 'preview':
  308. Dcat.helpers.previewImage($wrap.find('img').attr('src'), null, file.name);
  309. break;
  310. }
  311. });
  312. }
  313. // 图片宽高验证
  314. function validateDimensions(file) {
  315. // The image dimensions is invalid.
  316. if (!showImg || !isImage(file) || !Dcat.helpers.len(opts.dimensions)) return true;
  317. var dimensions = opts.dimensions,
  318. width = file._info.width,
  319. height = file._info.height,
  320. isset = Dcat.helpers.isset;
  321. if (
  322. (isset(dimensions, 'width') && dimensions['width'] != width) ||
  323. (isset(dimensions, 'min_width') && dimensions['min_width'] > width)||
  324. (isset(dimensions, 'max_width') && dimensions['max_width'] < width) ||
  325. (isset(dimensions, 'height') && dimensions['height'] != height) ||
  326. (isset(dimensions, 'min_height') && dimensions['min_height'] > height) ||
  327. (isset(dimensions, 'max_height') && dimensions['max_height'] < height) ||
  328. (isset(dimensions, 'ratio') && dimensions['ratio'] != (width / height))
  329. ) {
  330. return false;
  331. }
  332. return true;
  333. }
  334. // 负责view的销毁
  335. function removeUploadFile(file) {
  336. var $li = getFileView(file.id);
  337. delete percentages[file.id];
  338. updateTotalProgress();
  339. $li.off().find('.file-panel').off().end().remove();
  340. }
  341. function updateTotalProgress() {
  342. var loaded = 0,
  343. total = 0,
  344. $bar = $progress.find('.progress-bar'),
  345. percent;
  346. $.each(percentages, function (k, v) {
  347. total += v[0];
  348. loaded += v[0] * v[1];
  349. });
  350. percent = total ? loaded / total : 0;
  351. percent = Math.round(percent * 100) + '%';
  352. $bar.text(percent);
  353. $bar.css('width', percent);
  354. updateStatusText();
  355. }
  356. function updateStatusText() {
  357. var text = '', stats;
  358. if (!uploader) {
  359. return;
  360. }
  361. if (state === 'ready') {
  362. stats = uploader.getStats();
  363. if (fileCount) {
  364. text = __('selected_files', {num: fileCount, size: WebUploader.formatSize(fileSize)});
  365. } else {
  366. showSuccess();
  367. }
  368. } else if (state === 'confirm') {
  369. stats = uploader.getStats();
  370. if (stats.uploadFailNum) {
  371. text = __('selected_has_failed', {success: stats.successNum, fail: stats.uploadFailNum});
  372. }
  373. } else {
  374. showSuccess();
  375. }
  376. function showSuccess() {
  377. stats = uploader.getStats();
  378. if (stats.successNum) {
  379. text = __('selected_success', {num: fileCount, size: WebUploader.formatSize(fileSize), success: stats.successNum});
  380. }
  381. if (stats.uploadFailNum) {
  382. text += (text ? __('dot') : '') + __('failed_num', {fail: stats.uploadFailNum});
  383. }
  384. }
  385. $info.html(text);
  386. }
  387. // 上传文件后修改字段值
  388. function updateFileColumn() {
  389. var values = getInput(),
  390. num = uploader.getStats().successNum,
  391. form = $.extend({}, opts.formData);
  392. if (!num || !values || !opts.autoUpdateColumn) {
  393. return;
  394. }
  395. form[updateColumn] = values.join(',');
  396. delete form['upload_column'];
  397. $.post(opts.updateServer, form);
  398. }
  399. function setState(val, args) {
  400. var stats;
  401. args = args || {};
  402. if (val === state) {
  403. return;
  404. }
  405. if ($upload) {
  406. $upload.removeClass('state-' + state);
  407. $upload.addClass('state-' + val);
  408. }
  409. state = val;
  410. switch (state) {
  411. case 'pedding':
  412. if (opts.disabled) return;
  413. $placeHolder.removeClass('element-invisible');
  414. $queue.hide();
  415. $statusBar.addClass('element-invisible');
  416. if (showImg) {
  417. $wrap.removeAttr('style');
  418. $wrap.find('.queueList').removeAttr('style');
  419. }
  420. refreshButton();
  421. break;
  422. case 'ready':
  423. $placeHolder.addClass('element-invisible');
  424. $selector.find(addFileButtonSelector).removeClass('element-invisible');
  425. $queue.show();
  426. if (!opts.disabled) {
  427. $statusBar.removeClass('element-invisible');
  428. }
  429. refreshButton();
  430. if (showImg) {
  431. $wrap.find('.queueList').css({'border': '1px solid #d3dde5', 'padding':'5px'});
  432. // $wrap.find('.queueList').removeAttr('style');
  433. }
  434. break;
  435. case 'uploading':
  436. $selector.find(addFileButtonSelector).addClass('element-invisible');
  437. $progress.show();
  438. $upload.text(__('pause_upload'));
  439. break;
  440. case 'paused':
  441. $progress.show();
  442. $upload.text(__('go_on_upload'));
  443. break;
  444. case 'confirm':
  445. if (uploader) {
  446. $progress.hide();
  447. $selector.find(addFileButtonSelector).removeClass('element-invisible');
  448. $upload.text(__('start_upload'));
  449. stats = uploader.getStats();
  450. if (stats.successNum && !stats.uploadFailNum) {
  451. setState('finish');
  452. return;
  453. }
  454. }
  455. break;
  456. case 'finish':
  457. if (uploader) {
  458. stats = uploader.getStats();
  459. if (stats.successNum) {
  460. Dcat.success(__('upload_success_message', {success: stats.successNum}));
  461. setTimeout(function () {
  462. if (opts.upload.fileNumLimit == 1) {
  463. // 单文件上传,需要重置文件上传个数
  464. uploader.request('get-stats').numOfSuccess = 0;
  465. }
  466. }, 10);
  467. } else {
  468. // 没有成功的图片,重设
  469. state = 'done';
  470. location.reload();
  471. }
  472. }
  473. break;
  474. case 'decrOriginalFileNum':
  475. if (originalFilesNum > 0) originalFilesNum --;
  476. break;
  477. case 'incrOriginalFileNum':
  478. originalFilesNum ++;
  479. break;
  480. case 'decrFileNumLimit': // 减少上传文件数量限制
  481. if (!uploader) {
  482. return;
  483. }
  484. var fileLimit = uploader.option('fileNumLimit'),
  485. num = args.num || 1;
  486. if (fileLimit == '-1') fileLimit = 0;
  487. num = fileLimit >= num ? fileLimit - num : 0;
  488. if (num == 0) num = '-1';
  489. uploader.option('fileNumLimit', num);
  490. break;
  491. case 'incrFileNumLimit': // 增加上传文件数量限制
  492. if (!uploader) {
  493. return;
  494. }
  495. var fileLimit = uploader.option('fileNumLimit'),
  496. num = args.num || 1;
  497. if (fileLimit == '-1') fileLimit = 0;
  498. num = fileLimit + num;
  499. uploader.option('fileNumLimit', num);
  500. break;
  501. case 'init': // 初始化
  502. $upload.addClass('state-' + state);
  503. updateTotalProgress();
  504. if (originalFilesNum || opts.disabled) {
  505. $placeHolder.addClass('element-invisible');
  506. if (!opts.disabled) {
  507. $statusBar.show();
  508. } else {
  509. $wrap.addClass('disabled');
  510. }
  511. setState('ready');
  512. } else if (showImg) {
  513. $wrap.removeAttr('style');
  514. $wrap.find('.queueList').css('margin', '0');
  515. }
  516. refreshButton();
  517. break;
  518. }
  519. updateStatusText();
  520. }
  521. // 移除form表单的文件
  522. function removeFormFile(fileId) {
  523. if (!fileId) return;
  524. var file = formFiles[fileId];
  525. deleteInput(fileId);
  526. delete formFiles[fileId];
  527. if (uploader && !file.fake) {
  528. uploader.removeFile(file);
  529. }
  530. setState('decrOriginalFileNum');
  531. setState('incrFileNumLimit');
  532. if (!Dcat.helpers.len(formFiles) && !Dcat.helpers.len(percentages)) {
  533. setState('pedding');
  534. }
  535. }
  536. // 获取表单值
  537. function getInput() {
  538. var val = $input.val();
  539. return val ? val.split(',') : [];
  540. }
  541. // 新增表单值
  542. function addInput(id) {
  543. var val = getInput();
  544. val.push(id);
  545. setInput(val);
  546. }
  547. // 设置表单值
  548. function setInput(arr) {
  549. arr = arr.filter(function(v, k, self) {
  550. return self.indexOf(v) === k;
  551. }).filter(function (v) {
  552. return v ? true : false;
  553. });
  554. $input.val(arr.join(','));
  555. }
  556. // 删除表单值
  557. function deleteInput(id) {
  558. if (!id) {
  559. return $input.val('');
  560. }
  561. setInput(getInput().filter(function (v) {
  562. return v != id;
  563. }));
  564. }
  565. // 重新计算按钮定位
  566. function refreshButton() {
  567. uploader.refresh();
  568. }
  569. // 添加上传成功文件到表单区域
  570. function appendUploadedFileForm(file) {
  571. var html = "";
  572. html += "<li title='" + file.serverPath + "'>";
  573. if (showImg) {
  574. html += `<p class='imgWrap'><img src='${file.serverUrl}'></p>`
  575. } else if (! opts.disabled) {
  576. html += `<p class="file-action" data-file-act="delete" data-id="${file.serverId}"><i class="feather icon-trash red-dark"></i></p>`;
  577. }
  578. html += "<p class='title' style=''><i class='feather icon-check text-white icon-success text-white'></i>";
  579. html += file.serverPath;
  580. html += "</p>";
  581. if (showImg) {
  582. html += "<p class='title' style='margin-bottom:20px;'>&nbsp;</p>";
  583. html += "<div class='file-panel' >";
  584. if (! opts.disabled) {
  585. html += `<a class='btn btn-sm btn-white' data-file-act='deleteurl' data-id='${file.serverId}'><i class='feather icon-trash red-dark' style='font-size:13px'></i></a>`;
  586. }
  587. html += `<a class='btn btn-sm btn-white' data-file-act='preview' data-url='${file.serverUrl}' ><i class='feather icon-zoom-in'></i></a>`;
  588. html += "</div>";
  589. }
  590. html += "</li>";
  591. html = $(html);
  592. if (!showImg) {
  593. html.find('.file-type').show();
  594. html.find('.title').show();
  595. $wrap.css('background', 'transparent');
  596. }
  597. var deleteFile = function () {
  598. var fileId = $(this).data('id'), post = opts.deleteData;
  599. if (opts.disableRemove) {
  600. html.remove();
  601. return removeFormFile(fileId);
  602. }
  603. Dcat.confirm(__('confirm_delete_file'), file.serverId, function () {
  604. post.key = fileId;
  605. post._column = updateColumn;
  606. Dcat.loading();
  607. $.post(opts.deleteUrl, post, function (result) {
  608. Dcat.loading(false);
  609. if (result.status) {
  610. // 移除
  611. html.remove();
  612. removeFormFile(fileId);
  613. return;
  614. }
  615. Dcat.error(result.message || 'Remove file failed.')
  616. });
  617. });
  618. };
  619. // 删除按钮点击事件
  620. html.find('[data-file-act="deleteurl"]').click(deleteFile);
  621. html.find('[data-file-act="delete"]').click(deleteFile);
  622. // 放大图片
  623. html.find('[data-file-act="preview"]').click(function () {
  624. var url = $(this).data('url');
  625. Dcat.helpers.previewImage(url);
  626. });
  627. setState('incrOriginalFileNum');
  628. setState('decrFileNumLimit');
  629. formFiles[file.serverId] = file;
  630. addInput(file.serverId);
  631. $queue.append(html);
  632. if (showImg) {
  633. setTimeout(function () { html.css('margin', '5px');}, 400);
  634. }
  635. }
  636. // 初始化web-uploader
  637. function build() {
  638. $wrap = $selector.find(opts.wrapper);
  639. // 图片容器
  640. $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList'));
  641. // 状态栏,包括进度和控制按钮
  642. $statusBar = $wrap.find('.statusBar');
  643. // 文件总体选择信息。
  644. $info = $statusBar.find('.info');
  645. // 上传按钮
  646. $upload = $wrap.find('.upload-btn');
  647. // 没选择文件之前的内容。
  648. $placeHolder = $wrap.find('.placeholder');
  649. $progress = $statusBar.find('.upload-progress').hide();
  650. // IE;
  651. supportIe();
  652. // 实例化
  653. this.uploader = uploader = WebUploader.create(opts.upload);
  654. // 拖拽时不接受 js, txt 文件。
  655. uploader.on('dndAccept', function (items) {
  656. var denied = false,
  657. len = items.length,
  658. i = 0,
  659. // 修改js类型
  660. unAllowed = 'text/plain;application/javascript ';
  661. for (; i < len; i++) {
  662. // 如果在列表里面
  663. if (~unAllowed.indexOf(items[i].type)) {
  664. denied = true;
  665. break;
  666. }
  667. }
  668. return !denied;
  669. });
  670. if (opts.upload.fileNumLimit > 1 && !opts.disabled) {
  671. // 添加“添加文件”的按钮,
  672. uploader.addButton({
  673. id: addFileButtonSelector,
  674. label: '<i class="feather icon-folder"></i> &nbsp;' + __('go_on_add')
  675. });
  676. }
  677. uploader.onUploadProgress = function (file, percentage) {
  678. percentages[file.id][1] = percentage;
  679. updateTotalProgress();
  680. };
  681. uploader.onBeforeFileQueued = function (file) {
  682. };
  683. uploader.onFileQueued = function (file) {
  684. fileCount++;
  685. fileSize += file.size;
  686. if (fileCount === 1) {
  687. $placeHolder.addClass('element-invisible');
  688. $statusBar.show();
  689. }
  690. addFile(file);
  691. setState('ready');
  692. updateTotalProgress();
  693. };
  694. // 删除文件事件监听
  695. uploader.onFileDequeued = function (file) {
  696. fileCount--;
  697. fileSize -= file.size;
  698. if (!fileCount && !Dcat.helpers.len(formFiles)) {
  699. setState('pedding');
  700. }
  701. removeUploadFile(file);
  702. };
  703. uploader.on('all', function (type, obj, reason) {
  704. switch (type) {
  705. case 'uploadFinished':
  706. setState('confirm');
  707. updateFileColumn();
  708. break;
  709. case 'startUpload':
  710. setState('uploading');
  711. break;
  712. case 'stopUpload':
  713. setState('paused');
  714. break;
  715. case 'uploadAccept':
  716. // 上传失败,返回false
  717. if (reason && reason.error) {
  718. Dcat.error(reason.error.message);
  719. faildFiles[obj.file.id] = obj.file;
  720. return false;
  721. }
  722. if (reason.merge) {
  723. // 分片上传
  724. return;
  725. }
  726. // 上传成功,保存新文件名和路径到file对象
  727. obj.file.serverId = reason.id;
  728. obj.file.serverName = reason.name;
  729. obj.file.serverPath = reason.path;
  730. obj.file.serverUrl = reason.url || null;
  731. addInput(reason.id);
  732. if (!showImg) {
  733. var $li = getFileView(obj.file.id);
  734. $li.find('.file-action').hide();
  735. $li.find('[data-file-act="delete"]').show();
  736. }
  737. break;
  738. }
  739. });
  740. uploader.onError = function (code) {
  741. switch (code) {
  742. case 'Q_TYPE_DENIED':
  743. Dcat.error(__('Q_TYPE_DENIED'));
  744. break;
  745. case 'Q_EXCEED_NUM_LIMIT':
  746. Dcat.error(__('Q_EXCEED_NUM_LIMIT', {num: opts.upload.fileNumLimit}));
  747. break;
  748. case 'F_EXCEED_SIZE':
  749. Dcat.error(__('F_EXCEED_SIZE'));
  750. break;
  751. case 'Q_EXCEED_SIZE_LIMIT':
  752. Dcat.error(__('Q_EXCEED_SIZE_LIMIT'));
  753. break;
  754. case 'F_DUPLICATE':
  755. Dcat.warning(__('F_DUPLICATE'));
  756. break;
  757. default:
  758. Dcat.error('Error: ' + code);
  759. }
  760. };
  761. $upload.on('click', function () {
  762. if ($(this).hasClass('disabled')) {
  763. return false;
  764. }
  765. if (state === 'ready') {
  766. uploader.upload();
  767. } else if (state === 'paused') {
  768. uploader.upload();
  769. } else if (state === 'uploading') {
  770. uploader.stop();
  771. }
  772. });
  773. $info.on('click', '.retry', function () {
  774. uploader.retry();
  775. });
  776. $info.on('click', '.ignore', function () {
  777. for (var i in faildFiles) {
  778. uploader.removeFile(i, true);
  779. delete faildFiles[i];
  780. }
  781. });
  782. setState('init');
  783. }
  784. // 预览
  785. function preview() {
  786. for (var i in opts.preview) {
  787. var path = opts.preview[i].path, ext;
  788. if (path.indexOf('.')) {
  789. ext = path.split('.').pop();
  790. }
  791. appendUploadedFileForm({
  792. serverId: opts.preview[i].id,
  793. serverUrl: opts.preview[i].url,
  794. serverPath: path,
  795. ext: ext,
  796. fake: 1,
  797. })
  798. }
  799. }
  800. this.uploader = uploader;
  801. this.options = opts;
  802. this.build = build;
  803. this.preview = preview;
  804. this.setState = setState;
  805. this.refreshButton = refreshButton;
  806. this.getFileView = getFileView;
  807. this.getFileViewSelector = getFileViewSelector;
  808. this.addFileView = addFile;
  809. this.removeUploadFileView = removeUploadFile;
  810. this.isImage = isImage;
  811. this.getColumn = function () {
  812. return updateColumn;
  813. };
  814. function supportIe() {
  815. if (!WebUploader.Uploader.support('flash') && WebUploader.browser.ie) {
  816. // flash 安装了但是版本过低。
  817. if (flashVersion) {
  818. (function (container) {
  819. window['expressinstallcallback'] = function (state) {
  820. switch (state) {
  821. case 'Download.Cancelled':
  822. break;
  823. case 'Download.Failed':
  824. Dcat.error('Install failed!');
  825. break;
  826. default:
  827. Dcat.success('Install Success!');
  828. break;
  829. }
  830. delete window['expressinstallcallback'];
  831. };
  832. var swf = './expressInstall.swf';
  833. // insert flash object
  834. var html = `<object type="application/x-shockwave-flash" data="${swf}" `;
  835. if (WebUploader.browser.ie) {
  836. html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ';
  837. }
  838. html += `width="100%" height="100%" style="outline:0">
  839. <param name="movie" value="${swf}" />
  840. <param name="wmode" value="transparent" />
  841. <param name="allowscriptaccess" value="always" />
  842. </object>`;
  843. container.html(html);
  844. })($wrap);
  845. } else {
  846. $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>');
  847. }
  848. return;
  849. } else if (!WebUploader.Uploader.support()) {
  850. Dcat.error('您的浏览器不支持Web Uploader!');
  851. return;
  852. }
  853. }
  854. return this;
  855. }
  856. Dcat.Uploader = function (options) {
  857. return new Uploader(options)
  858. };
  859. })(window, jQuery);