upload.js 36 KB

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