video.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792
  1. /**
  2. * Created by JetBrains PhpStorm.
  3. * User: taoqili
  4. * Date: 12-2-20
  5. * Time: 上午11:19
  6. * To change this template use File | Settings | File Templates.
  7. */
  8. (function(){
  9. var video = {},
  10. uploadVideoList = [],
  11. isModifyUploadVideo = false,
  12. uploadFile;
  13. window.onload = function(){
  14. $focus($G("videoUrl"));
  15. initTabs();
  16. initVideo();
  17. initUpload();
  18. };
  19. /* 初始化tab标签 */
  20. function initTabs(){
  21. var tabs = $G('tabHeads').children;
  22. for (var i = 0; i < tabs.length; i++) {
  23. domUtils.on(tabs[i], "click", function (e) {
  24. var j, bodyId, target = e.target || e.srcElement;
  25. for (j = 0; j < tabs.length; j++) {
  26. bodyId = tabs[j].getAttribute('data-content-id');
  27. if(tabs[j] == target){
  28. domUtils.addClass(tabs[j], 'focus');
  29. domUtils.addClass($G(bodyId), 'focus');
  30. }else {
  31. domUtils.removeClasses(tabs[j], 'focus');
  32. domUtils.removeClasses($G(bodyId), 'focus');
  33. }
  34. }
  35. });
  36. }
  37. }
  38. function initVideo(){
  39. createAlignButton( ["videoFloat", "upload_alignment"] );
  40. addUrlChangeListener($G("videoUrl"));
  41. addOkListener();
  42. //编辑视频时初始化相关信息
  43. (function(){
  44. var img = editor.selection.getRange().getClosedNode(),url;
  45. if(img && img.className){
  46. var hasFakedClass = (img.className == "edui-faked-video"),
  47. hasUploadClass = img.className.indexOf("edui-upload-video")!=-1;
  48. if(hasFakedClass || hasUploadClass) {
  49. $G("videoUrl").value = url = img.getAttribute("_url");
  50. $G("videoWidth").value = img.width;
  51. $G("videoHeight").value = img.height;
  52. var align = domUtils.getComputedStyle(img,"float"),
  53. parentAlign = domUtils.getComputedStyle(img.parentNode,"text-align");
  54. updateAlignButton(parentAlign==="center"?"center":align);
  55. }
  56. if(hasUploadClass) {
  57. isModifyUploadVideo = true;
  58. }
  59. }
  60. createPreviewVideo(url);
  61. })();
  62. }
  63. /**
  64. * 监听确认和取消两个按钮事件,用户执行插入或者清空正在播放的视频实例操作
  65. */
  66. function addOkListener(){
  67. dialog.onok = function(){
  68. $G("preview").innerHTML = "";
  69. var currentTab = findFocus("tabHeads","tabSrc");
  70. switch(currentTab){
  71. case "video":
  72. return insertSingle();
  73. break;
  74. case "videoSearch":
  75. return insertSearch("searchList");
  76. break;
  77. case "upload":
  78. return insertUpload();
  79. break;
  80. }
  81. };
  82. dialog.oncancel = function(){
  83. $G("preview").innerHTML = "";
  84. };
  85. }
  86. /**
  87. * 依据传入的align值更新按钮信息
  88. * @param align
  89. */
  90. function updateAlignButton( align ) {
  91. var aligns = $G( "videoFloat" ).children;
  92. for ( var i = 0, ci; ci = aligns[i++]; ) {
  93. if ( ci.getAttribute( "name" ) == align ) {
  94. if ( ci.className !="focus" ) {
  95. ci.className = "focus";
  96. }
  97. } else {
  98. if ( ci.className =="focus" ) {
  99. ci.className = "";
  100. }
  101. }
  102. }
  103. }
  104. /**
  105. * 将单个视频信息插入编辑器中
  106. */
  107. function insertSingle(){
  108. var width = $G("videoWidth"),
  109. height = $G("videoHeight"),
  110. url=$G('videoUrl').value,
  111. align = findFocus("videoFloat","name");
  112. if(!url) return false;
  113. if ( !checkNum( [width, height] ) ) return false;
  114. editor.execCommand('insertvideo', {
  115. url: convert_url(url),
  116. width: width.value,
  117. height: height.value,
  118. align: align
  119. }, isModifyUploadVideo ? 'upload':null);
  120. }
  121. /**
  122. * 将元素id下的所有代表视频的图片插入编辑器中
  123. * @param id
  124. */
  125. function insertSearch(id){
  126. var imgs = domUtils.getElementsByTagName($G(id),"img"),
  127. videoObjs=[];
  128. for(var i=0,img; img=imgs[i++];){
  129. if(img.getAttribute("selected")){
  130. videoObjs.push({
  131. url:img.getAttribute("ue_video_url"),
  132. width:420,
  133. height:280,
  134. align:"none"
  135. });
  136. }
  137. }
  138. editor.execCommand('insertvideo',videoObjs);
  139. }
  140. /**
  141. * 找到id下具有focus类的节点并返回该节点下的某个属性
  142. * @param id
  143. * @param returnProperty
  144. */
  145. function findFocus( id, returnProperty ) {
  146. var tabs = $G( id ).children,
  147. property;
  148. for ( var i = 0, ci; ci = tabs[i++]; ) {
  149. if ( ci.className=="focus" ) {
  150. property = ci.getAttribute( returnProperty );
  151. break;
  152. }
  153. }
  154. return property;
  155. }
  156. function convert_url(url){
  157. if ( !url ) return '';
  158. url = utils.trim(url)
  159. .replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/player.php/sid/$1/v.swf')
  160. .replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2")
  161. .replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1")
  162. .replace(/v\.ku6\.com\/.+\/([\w\.]+)\.html.*$/i, "player.ku6.com/refer/$1/v.swf")
  163. .replace(/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "player.56.com/v_$1.swf")
  164. .replace(/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "player.56.com/v_$1.swf")
  165. .replace(/v\.pps\.tv\/play_([\w]+)\.html.*$/i, "player.pps.tv/player/sid/$1/v.swf")
  166. .replace(/www\.letv\.com\/ptv\/vplay\/([\d]+)\.html.*$/i, "i7.imgs.letv.com/player/swfPlayer.swf?id=$1&autoplay=0")
  167. .replace(/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "www.tudou.com/v/$1")
  168. .replace(/v\.qq\.com\/cover\/[\w]+\/[\w]+\/([\w]+)\.html/i, "static.video.qq.com/TPout.swf?vid=$1")
  169. .replace(/v\.qq\.com\/.+[\?\&]vid=([^&]+).*$/i, "static.video.qq.com/TPout.swf?vid=$1")
  170. .replace(/my\.tv\.sohu\.com\/[\w]+\/[\d]+\/([\d]+)\.shtml.*$/i, "share.vrs.sohu.com/my/v.swf&id=$1");
  171. return url;
  172. }
  173. /**
  174. * 检测传入的所有input框中输入的长宽是否是正数
  175. * @param nodes input框集合,
  176. */
  177. function checkNum( nodes ) {
  178. for ( var i = 0, ci; ci = nodes[i++]; ) {
  179. var value = ci.value;
  180. if ( !isNumber( value ) && value) {
  181. alert( lang.numError );
  182. ci.value = "";
  183. ci.focus();
  184. return false;
  185. }
  186. }
  187. return true;
  188. }
  189. /**
  190. * 数字判断
  191. * @param value
  192. */
  193. function isNumber( value ) {
  194. return /(0|^[1-9]\d*$)/.test( value );
  195. }
  196. /**
  197. * 创建图片浮动选择按钮
  198. * @param ids
  199. */
  200. function createAlignButton( ids ) {
  201. for ( var i = 0, ci; ci = ids[i++]; ) {
  202. var floatContainer = $G( ci ),
  203. nameMaps = {"none":lang['default'], "left":lang.floatLeft, "right":lang.floatRight, "center":lang.block};
  204. for ( var j in nameMaps ) {
  205. var div = document.createElement( "div" );
  206. div.setAttribute( "name", j );
  207. if ( j == "none" ) div.className="focus";
  208. div.style.cssText = "background:url(images/" + j + "_focus.jpg);";
  209. div.setAttribute( "title", nameMaps[j] );
  210. floatContainer.appendChild( div );
  211. }
  212. switchSelect( ci );
  213. }
  214. }
  215. /**
  216. * 选择切换
  217. * @param selectParentId
  218. */
  219. function switchSelect( selectParentId ) {
  220. var selects = $G( selectParentId ).children;
  221. for ( var i = 0, ci; ci = selects[i++]; ) {
  222. domUtils.on( ci, "click", function () {
  223. for ( var j = 0, cj; cj = selects[j++]; ) {
  224. cj.className = "";
  225. cj.removeAttribute && cj.removeAttribute( "class" );
  226. }
  227. this.className = "focus";
  228. } )
  229. }
  230. }
  231. /**
  232. * 监听url改变事件
  233. * @param url
  234. */
  235. function addUrlChangeListener(url){
  236. if (browser.ie) {
  237. url.onpropertychange = function () {
  238. createPreviewVideo( this.value );
  239. }
  240. } else {
  241. url.addEventListener( "input", function () {
  242. createPreviewVideo( this.value );
  243. }, false );
  244. }
  245. }
  246. /**
  247. * 根据url生成视频预览
  248. * @param url
  249. */
  250. function createPreviewVideo(url){
  251. if ( !url )return;
  252. var conUrl = convert_url(url);
  253. conUrl = utils.unhtmlForUrl(conUrl);
  254. $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
  255. '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
  256. ' src="' + conUrl + '"' +
  257. ' width="' + 420 + '"' +
  258. ' height="' + 280 + '"' +
  259. ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
  260. '</embed>';
  261. }
  262. /* 插入上传视频 */
  263. function insertUpload(){
  264. var videoObjs=[],
  265. uploadDir = editor.getOpt('videoUrlPrefix'),
  266. width = parseInt($G('upload_width').value, 10) || 420,
  267. height = parseInt($G('upload_height').value, 10) || 280,
  268. align = findFocus("upload_alignment","name") || 'none';
  269. for(var key in uploadVideoList) {
  270. var file = uploadVideoList[key];
  271. videoObjs.push({
  272. url: uploadDir + file.url,
  273. width:width,
  274. height:height,
  275. align:align
  276. });
  277. }
  278. var count = uploadFile.getQueueCount();
  279. if (count) {
  280. $('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
  281. return false;
  282. } else {
  283. editor.execCommand('insertvideo', videoObjs, 'upload');
  284. }
  285. }
  286. /*初始化上传标签*/
  287. function initUpload(){
  288. uploadFile = new UploadFile('queueList');
  289. }
  290. /* 上传附件 */
  291. function UploadFile(target) {
  292. this.$wrap = target.constructor == String ? $('#' + target) : $(target);
  293. this.init();
  294. }
  295. UploadFile.prototype = {
  296. init: function () {
  297. this.fileList = [];
  298. this.initContainer();
  299. this.initUploader();
  300. },
  301. initContainer: function () {
  302. this.$queue = this.$wrap.find('.filelist');
  303. },
  304. /* 初始化容器 */
  305. initUploader: function () {
  306. var _this = this,
  307. $ = jQuery, // just in case. Make sure it's not an other libaray.
  308. $wrap = _this.$wrap,
  309. // 图片容器
  310. $queue = $wrap.find('.filelist'),
  311. // 状态栏,包括进度和控制按钮
  312. $statusBar = $wrap.find('.statusBar'),
  313. // 文件总体选择信息。
  314. $info = $statusBar.find('.info'),
  315. // 上传按钮
  316. $upload = $wrap.find('.uploadBtn'),
  317. // 上传按钮
  318. $filePickerBtn = $wrap.find('.filePickerBtn'),
  319. // 上传按钮
  320. $filePickerBlock = $wrap.find('.filePickerBlock'),
  321. // 没选择文件之前的内容。
  322. $placeHolder = $wrap.find('.placeholder'),
  323. // 总体进度条
  324. $progress = $statusBar.find('.progress').hide(),
  325. // 添加的文件数量
  326. fileCount = 0,
  327. // 添加的文件总大小
  328. fileSize = 0,
  329. // 优化retina, 在retina下这个值是2
  330. ratio = window.devicePixelRatio || 1,
  331. // 缩略图大小
  332. thumbnailWidth = 113 * ratio,
  333. thumbnailHeight = 113 * ratio,
  334. // 可能有pedding, ready, uploading, confirm, done.
  335. state = '',
  336. // 所有文件的进度信息,key为file id
  337. percentages = {},
  338. supportTransition = (function () {
  339. var s = document.createElement('p').style,
  340. r = 'transition' in s ||
  341. 'WebkitTransition' in s ||
  342. 'MozTransition' in s ||
  343. 'msTransition' in s ||
  344. 'OTransition' in s;
  345. s = null;
  346. return r;
  347. })(),
  348. // WebUploader实例
  349. uploader,
  350. actionUrl = editor.getActionUrl(editor.getOpt('videoActionName')),
  351. fileMaxSize = editor.getOpt('videoMaxSize'),
  352. acceptExtensions = (editor.getOpt('videoAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, '');;
  353. if (!WebUploader.Uploader.support()) {
  354. $('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
  355. return;
  356. } else if (!editor.getOpt('videoActionName')) {
  357. $('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
  358. return;
  359. }
  360. uploader = _this.uploader = WebUploader.create({
  361. pick: {
  362. id: '#filePickerReady',
  363. label: lang.uploadSelectFile
  364. },
  365. swf: '../../third-party/webuploader/Uploader.swf',
  366. server: actionUrl,
  367. fileVal: editor.getOpt('videoFieldName'),
  368. duplicate: true,
  369. fileSingleSizeLimit: fileMaxSize,
  370. compress: false
  371. });
  372. uploader.addButton({
  373. id: '#filePickerBlock'
  374. });
  375. uploader.addButton({
  376. id: '#filePickerBtn',
  377. label: lang.uploadAddFile
  378. });
  379. setState('pedding');
  380. // 当有文件添加进来时执行,负责view的创建
  381. function addFile(file) {
  382. var $li = $('<li id="' + file.id + '">' +
  383. '<p class="title">' + file.name + '</p>' +
  384. '<p class="imgWrap"></p>' +
  385. '<p class="progress"><span></span></p>' +
  386. '</li>'),
  387. $btns = $('<div class="file-panel">' +
  388. '<span class="cancel">' + lang.uploadDelete + '</span>' +
  389. '<span class="rotateRight">' + lang.uploadTurnRight + '</span>' +
  390. '<span class="rotateLeft">' + lang.uploadTurnLeft + '</span></div>').appendTo($li),
  391. $prgress = $li.find('p.progress span'),
  392. $wrap = $li.find('p.imgWrap'),
  393. $info = $('<p class="error"></p>').hide().appendTo($li),
  394. showError = function (code) {
  395. switch (code) {
  396. case 'exceed_size':
  397. text = lang.errorExceedSize;
  398. break;
  399. case 'interrupt':
  400. text = lang.errorInterrupt;
  401. break;
  402. case 'http':
  403. text = lang.errorHttp;
  404. break;
  405. case 'not_allow_type':
  406. text = lang.errorFileType;
  407. break;
  408. default:
  409. text = lang.errorUploadRetry;
  410. break;
  411. }
  412. $info.text(text).show();
  413. };
  414. if (file.getStatus() === 'invalid') {
  415. showError(file.statusText);
  416. } else {
  417. $wrap.text(lang.uploadPreview);
  418. if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|'+file.ext.toLowerCase()+'|') == -1) {
  419. $wrap.empty().addClass('notimage').append('<i class="file-preview file-type-' + file.ext.toLowerCase() + '"></i>' +
  420. '<span class="file-title">' + file.name + '</span>');
  421. } else {
  422. if (browser.ie && browser.version <= 7) {
  423. $wrap.text(lang.uploadNoPreview);
  424. } else {
  425. uploader.makeThumb(file, function (error, src) {
  426. if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) {
  427. $wrap.text(lang.uploadNoPreview);
  428. } else {
  429. var $img = $('<img src="' + src + '">');
  430. $wrap.empty().append($img);
  431. $img.on('error', function () {
  432. $wrap.text(lang.uploadNoPreview);
  433. });
  434. }
  435. }, thumbnailWidth, thumbnailHeight);
  436. }
  437. }
  438. percentages[ file.id ] = [ file.size, 0 ];
  439. file.rotation = 0;
  440. /* 检查文件格式 */
  441. if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) {
  442. showError('not_allow_type');
  443. uploader.removeFile(file);
  444. }
  445. }
  446. file.on('statuschange', function (cur, prev) {
  447. if (prev === 'progress') {
  448. $prgress.hide().width(0);
  449. } else if (prev === 'queued') {
  450. $li.off('mouseenter mouseleave');
  451. $btns.remove();
  452. }
  453. // 成功
  454. if (cur === 'error' || cur === 'invalid') {
  455. showError(file.statusText);
  456. percentages[ file.id ][ 1 ] = 1;
  457. } else if (cur === 'interrupt') {
  458. showError('interrupt');
  459. } else if (cur === 'queued') {
  460. percentages[ file.id ][ 1 ] = 0;
  461. } else if (cur === 'progress') {
  462. $info.hide();
  463. $prgress.css('display', 'block');
  464. } else if (cur === 'complete') {
  465. }
  466. $li.removeClass('state-' + prev).addClass('state-' + cur);
  467. });
  468. $li.on('mouseenter', function () {
  469. $btns.stop().animate({height: 30});
  470. });
  471. $li.on('mouseleave', function () {
  472. $btns.stop().animate({height: 0});
  473. });
  474. $btns.on('click', 'span', function () {
  475. var index = $(this).index(),
  476. deg;
  477. switch (index) {
  478. case 0:
  479. uploader.removeFile(file);
  480. return;
  481. case 1:
  482. file.rotation += 90;
  483. break;
  484. case 2:
  485. file.rotation -= 90;
  486. break;
  487. }
  488. if (supportTransition) {
  489. deg = 'rotate(' + file.rotation + 'deg)';
  490. $wrap.css({
  491. '-webkit-transform': deg,
  492. '-mos-transform': deg,
  493. '-o-transform': deg,
  494. 'transform': deg
  495. });
  496. } else {
  497. $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
  498. }
  499. });
  500. $li.insertBefore($filePickerBlock);
  501. }
  502. // 负责view的销毁
  503. function removeFile(file) {
  504. var $li = $('#' + file.id);
  505. delete percentages[ file.id ];
  506. updateTotalProgress();
  507. $li.off().find('.file-panel').off().end().remove();
  508. }
  509. function updateTotalProgress() {
  510. var loaded = 0,
  511. total = 0,
  512. spans = $progress.children(),
  513. percent;
  514. $.each(percentages, function (k, v) {
  515. total += v[ 0 ];
  516. loaded += v[ 0 ] * v[ 1 ];
  517. });
  518. percent = total ? loaded / total : 0;
  519. spans.eq(0).text(Math.round(percent * 100) + '%');
  520. spans.eq(1).css('width', Math.round(percent * 100) + '%');
  521. updateStatus();
  522. }
  523. function setState(val, files) {
  524. if (val != state) {
  525. var stats = uploader.getStats();
  526. $upload.removeClass('state-' + state);
  527. $upload.addClass('state-' + val);
  528. switch (val) {
  529. /* 未选择文件 */
  530. case 'pedding':
  531. $queue.addClass('element-invisible');
  532. $statusBar.addClass('element-invisible');
  533. $placeHolder.removeClass('element-invisible');
  534. $progress.hide(); $info.hide();
  535. uploader.refresh();
  536. break;
  537. /* 可以开始上传 */
  538. case 'ready':
  539. $placeHolder.addClass('element-invisible');
  540. $queue.removeClass('element-invisible');
  541. $statusBar.removeClass('element-invisible');
  542. $progress.hide(); $info.show();
  543. $upload.text(lang.uploadStart);
  544. uploader.refresh();
  545. break;
  546. /* 上传中 */
  547. case 'uploading':
  548. $progress.show(); $info.hide();
  549. $upload.text(lang.uploadPause);
  550. break;
  551. /* 暂停上传 */
  552. case 'paused':
  553. $progress.show(); $info.hide();
  554. $upload.text(lang.uploadContinue);
  555. break;
  556. case 'confirm':
  557. $progress.show(); $info.hide();
  558. $upload.text(lang.uploadStart);
  559. stats = uploader.getStats();
  560. if (stats.successNum && !stats.uploadFailNum) {
  561. setState('finish');
  562. return;
  563. }
  564. break;
  565. case 'finish':
  566. $progress.hide(); $info.show();
  567. if (stats.uploadFailNum) {
  568. $upload.text(lang.uploadRetry);
  569. } else {
  570. $upload.text(lang.uploadStart);
  571. }
  572. break;
  573. }
  574. state = val;
  575. updateStatus();
  576. }
  577. if (!_this.getQueueCount()) {
  578. $upload.addClass('disabled')
  579. } else {
  580. $upload.removeClass('disabled')
  581. }
  582. }
  583. function updateStatus() {
  584. var text = '', stats;
  585. if (state === 'ready') {
  586. text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize));
  587. } else if (state === 'confirm') {
  588. stats = uploader.getStats();
  589. if (stats.uploadFailNum) {
  590. text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum);
  591. }
  592. } else {
  593. stats = uploader.getStats();
  594. text = lang.updateStatusFinish.replace('_', fileCount).
  595. replace('_KB', WebUploader.formatSize(fileSize)).
  596. replace('_', stats.successNum);
  597. if (stats.uploadFailNum) {
  598. text += lang.updateStatusError.replace('_', stats.uploadFailNum);
  599. }
  600. }
  601. $info.html(text);
  602. }
  603. uploader.on('fileQueued', function (file) {
  604. fileCount++;
  605. fileSize += file.size;
  606. if (fileCount === 1) {
  607. $placeHolder.addClass('element-invisible');
  608. $statusBar.show();
  609. }
  610. addFile(file);
  611. });
  612. uploader.on('fileDequeued', function (file) {
  613. fileCount--;
  614. fileSize -= file.size;
  615. removeFile(file);
  616. updateTotalProgress();
  617. });
  618. uploader.on('filesQueued', function (file) {
  619. if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
  620. setState('ready');
  621. }
  622. updateTotalProgress();
  623. });
  624. uploader.on('all', function (type, files) {
  625. switch (type) {
  626. case 'uploadFinished':
  627. setState('confirm', files);
  628. break;
  629. case 'startUpload':
  630. /* 添加额外的GET参数 */
  631. var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
  632. url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);
  633. uploader.option('server', url);
  634. setState('uploading', files);
  635. break;
  636. case 'stopUpload':
  637. setState('paused', files);
  638. break;
  639. }
  640. });
  641. uploader.on('uploadBeforeSend', function (file, data, header) {
  642. //这里可以通过data对象添加POST参数
  643. header['X_Requested_With'] = 'XMLHttpRequest';
  644. });
  645. uploader.on('uploadProgress', function (file, percentage) {
  646. var $li = $('#' + file.id),
  647. $percent = $li.find('.progress span');
  648. $percent.css('width', percentage * 100 + '%');
  649. percentages[ file.id ][ 1 ] = percentage;
  650. updateTotalProgress();
  651. });
  652. uploader.on('uploadSuccess', function (file, ret) {
  653. var $file = $('#' + file.id);
  654. try {
  655. var responseText = (ret._raw || ret),
  656. json = utils.str2json(responseText);
  657. if (json.state == 'SUCCESS') {
  658. uploadVideoList.push({
  659. 'url': json.url,
  660. 'type': json.type,
  661. 'original':json.original
  662. });
  663. $file.append('<span class="success"></span>');
  664. } else {
  665. $file.find('.error').text(json.state).show();
  666. }
  667. } catch (e) {
  668. $file.find('.error').text(lang.errorServerUpload).show();
  669. }
  670. });
  671. uploader.on('uploadError', function (file, code) {
  672. });
  673. uploader.on('error', function (code, file) {
  674. if (code == 'Q_TYPE_DENIED' || code == 'F_EXCEED_SIZE') {
  675. addFile(file);
  676. }
  677. });
  678. uploader.on('uploadComplete', function (file, ret) {
  679. });
  680. $upload.on('click', function () {
  681. if ($(this).hasClass('disabled')) {
  682. return false;
  683. }
  684. if (state === 'ready') {
  685. uploader.upload();
  686. } else if (state === 'paused') {
  687. uploader.upload();
  688. } else if (state === 'uploading') {
  689. uploader.stop();
  690. }
  691. });
  692. $upload.addClass('state-' + state);
  693. updateTotalProgress();
  694. },
  695. getQueueCount: function () {
  696. var file, i, status, readyFile = 0, files = this.uploader.getFiles();
  697. for (i = 0; file = files[i++]; ) {
  698. status = file.getStatus();
  699. if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++;
  700. }
  701. return readyFile;
  702. },
  703. refresh: function(){
  704. this.uploader.refresh();
  705. }
  706. };
  707. })();