jquery文件上傳控件 WebUploader

WebUploader是百度開源的一個文件上傳組件，由於其操做簡潔大方，就在項目中使用了，記錄一下。 

效果是這樣子： 
 
這個樣子是默認的效果。

 
這個是選擇上傳的圖片，能夠批量，選擇後能夠刪除和添加更多。

 
這個是上傳過程顯示的效果。

 
 
 
 

  
  
  
  
1
  
  
  
  
2
  
  
  
  
3
  
  
  
  
4
  
  
  
  
5
  
  
  
  
6
  
  
  
  
7
  
  
  
  
8
  
  
  
  
9
  
  
  
  
10
  
  
  
  
11
  
  
  
  
12
  
  
  
  
13
  
  
  
  
14
  
  
  
  
15
  
  
  
  
16
  
  
  
  
17
  
  
  
  
18
  
  
  
  
19
  
  
  
  
20
  
  
  
  
21
  
  
  
  
22
 
 
 
 
 
 
 
 

  
  
  
  
1
  
  
  
  
2
  
  
  
  
3
  
  
  
  
4
  
  
  
  
5
  
  
  
  
6
  
  
  
  
7
  
  
  
  
8
  
  
  
  
9
  
  
  
  
10
  
  
  
  
11
  
  
  
  
12
  
  
  
  
13
  
  
  
  
14
  
  
  
  
15
  
  
  
  
16
  
  
  
  
17
  
  
  
  
18
  
  
  
  
19
  
  
  
  
20
  
  
  
  
21
  
  
  
  
22
 
 
 
 
 
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     id 
     = 
     "container" 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     <! 
     --頭部，相冊選擇和格式選擇--> 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     id 
     = 
     "uploader" 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     class 
     = 
     "queueList" 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     id 
     = 
     "dndArea" 
     class 
     = 
     "placeholder" 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     id 
     = 
     "filePicker" 
     > 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     <p> 
     <s: 
     text 
     name 
     = 
     "resource.upload.tip" 
     /> 
     </p> 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     class 
     = 
     "statusBar" 
      style= 
     "display:none;" 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     class 
     = 
     "progress" 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     <span  
     class 
     = 
     "text" 
     > 
     0% 
     </span> 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     <span  
     class 
     = 
     "percentage" 
     > 
     </span> 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     class 
     = 
     "info" 
     > 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     class 
     = 
     "btns" 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     id 
     = 
     "filePicker2" 
     > 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     < 
     div 
     class 
     = 
     "uploadBtn" 
     > 
     <s: 
     text 
     name 
     = 
     "resource.starttoupload" 
     > 
     </s: 
     text 
     > 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     </ 
     div 
     > 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     </ 
     div 
     > 
    
 
   
 

 

js部分代碼，下面這段代碼是webuploader官方的示例代碼uploader.js作的修改：

 
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     (function( $ ){ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
     // 當domReady的時候開始初始化 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    

      $ 
     (function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var filePerSize = [];//每一個文件大小 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var fileName = []; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var fileSize = 0; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var $wrap = $('#uploader'), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 圖片容器 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList')), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 狀態欄，包括進度和控制按鈕 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $statusBar = $wrap.find('.statusBar'), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 文件整體選擇信息。 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $info = $statusBar.find('.info'), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 上傳按鈕 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $upload = $wrap.find('.uploadBtn'), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 沒選擇文件以前的內容。 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $placeHolder = $wrap.find('.placeholder'), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $progress = $statusBar.find('.progress').hide(), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 添加的文件數量 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileCount = 0, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 添加的文件總大小 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileSize = 0, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 優化retina, 在retina下這個值是2 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      ratio = window.devicePixelRatio || 1, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 縮略圖大小 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      thumbnailWidth = 110 * ratio, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      thumbnailHeight = 110 * ratio, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 可能有pedding, ready, uploading, confirm, done. 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      state = 'pedding', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 全部文件的進度信息，key爲file id 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      percentages = {}, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 判斷瀏覽器是否支持圖片的base64 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      isSupportBase64 = ( function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var data = new Image(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var support = true; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      data.onload = data.onerror = function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if( this.width != 1 || this.height != 1 ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      support = false; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return support; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     (), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 檢測是否已經安裝flash，檢測flash的版本 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      flashVersion = ( function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var version; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      try { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      version = navigator.plugins[ 'Shockwave Flash' ]; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      version = version.description; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     catch 
     ( ex ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      try { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash') 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      .GetVariable('$version'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     catch 
     ( ex2 ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      version = '0.0'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      version = version.match( /\d+/g ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } ) 
     (), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      supportTransition = (function(){ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var s = document.createElement('p').style, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      r = 'transition' in s || 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      'WebkitTransition' in s || 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      'MozTransition' in s || 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      'msTransition' in s || 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      'OTransition' in s; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      s = null; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return r; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     (), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // WebUploader實例 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( !WebUploader.Uploader.support('flash') && WebUploader.browser.ie ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // flash 安裝了可是版本太低。 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if (flashVersion) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      (function(container) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      window['expressinstallcallback'] = function( state ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      switch(state) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'Download.Cancelled': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //alert('您取消了更新！') 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'Download.Failed': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //alert('安裝失敗') 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      default: 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //alert('安裝已成功，請刷新！'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      delete window['expressinstallcallback']; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var swf = './expressInstall.swf'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // insert flash object 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var html = '<object type="application/' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      'x-shockwave-flash" 
      data= 
     "' + swf + '" 
      ' 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if (WebUploader.browser.ie) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      html += 'width="100%" height="100%" style="outline:0">' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<param name="movie" value="' + swf + '" />' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<param name="wmode" value="transparent" />' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<param name="allowscriptaccess" value="always" />' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '</object>'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      container.html(html); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ($wrap) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 壓根就沒有安轉。 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $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>'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     if 
     (!WebUploader.Uploader.support()) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      alert( 'Web Uploader not support your browser！'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 實例化 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader = WebUploader.create({ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      pick: { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      id: '#filePicker', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      name: 'multiFile', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      label: 'Click To Select' 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      formData: { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      "status": "multi", 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      "contentsDto.contentsId": "xxxx", 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      "uploadNum": "xxxx", 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      "existFlg": "false", 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      dnd: '#dndArea', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      paste: '#uploader', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      method: 'POST', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      swf: '../../dist/Uploader.swf', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      chunked: false, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      chunkSize: 512 * 1024, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      chunkRetry:false, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      server: 'resource/upload.action?resourcetype=hd', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileVal:'multiFile', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      resize: false, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // runtimeOrder: 'flash', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      /* accept: { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      title: 'Images', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      extensions: 'gif,jpg,bmp,png,m2v', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      mimeTypes: 'image/*,video/mpeg', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     , */ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      disableGlobalDnd: true, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileNumLimit: 300, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileSizeLimit: 200 * 1024 * 1024, // 200 M 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 拖拽時不接受 js, txt 文件。 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.on('dndAccept', function( items ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var denied = false, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      len = items.length, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      i = 0, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 修改js類型 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      unAllowed = 'text/plain;application/javascript '; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      for ( ; i < len; i++ ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 若是在列表裏面 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( ~unAllowed.indexOf( items[ i ].type ) ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      denied = true; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return !denied; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //點擊按鈕彈出選擇框 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      /*uploader.on('dialogOpen', function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      console.log 
     ('here') 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     ) 
     ;*/ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 添加"添加文件"的按鈕， 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.addButton({ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      id: '#filePicker2', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      label: '<s:text name="resource.addmore"></s:text>' 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.on('ready', function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      window.uploader = uploader; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 當有文件添加進來時執行，負責view的建立 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function addFile( file ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var $li = $( '<li id="' + file.id + '">' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<p class="title">' + file.name + '</p>' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<p class="imgWrap"></p>'+ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<p class="progress"><span></span></p>' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '</li>' ), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $btns = $('<div class="file-panel">' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<span class="cancel"><s:text name="resource.delete"></s:text></span>' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<span class="rotateRight"><s:text name="resource.rotateToRight"></s:text></span>' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '<span class="rotateLeft"><s:text name="resource.rotateToLeft"></s:text></span></div>').appendTo 
     ( $li ), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $prgress = $li.find('p.progress span'), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap = $li.find( 'p.imgWrap' ), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $info = $('<p class="error"></p>'), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      showError = function( code ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      switch( code ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'exceed_size': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      text = '<s:text name="resource.exceedSize"></s:text>'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'interrupt': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      text = '<s:text name="resource.pauseupload"></s:text>'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      default: 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      text = '<s:text name="resource.uploadfailed"></s:text>'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $info.text( text ).appendTo( $li ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( file.getStatus() === 'invalid' ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      showError( file.statusText ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // @todo lazyload 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap.text( '<s:text name="resource.onPreview"></s:text>' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.makeThumb( file, function( error, src ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var img; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( error ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap.text( '<s:text name="resource.unablePreview"></s:text>' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if( isSupportBase64 ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      img = $('<img src="'+src+'">'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap.empty().append( img ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      /*$.ajax('../../server/preview.php', { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      method: 'POST', 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      data: src, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      dataType 
     :'json' 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     ) 
     .done 
     (function( response ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if  
     (response.result) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      img = $ 
     ('<img src="'+response.result+'">') 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap.empty 
     () 
     .append 
     ( img ) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
      else  
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap.text 
     ("預覽出錯") 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     ) 
     ;*/ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }, thumbnailWidth, thumbnailHeight ) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      percentages[ file.id ] = [ file.size, 0 ]; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      file.rotation = 0; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      file.on('statuschange', function( cur, prev ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( prev === 'progress' ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $prgress.hide().width(0); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     if 
     ( prev === 'queued' ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.off( 'mouseenter mouseleave' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $btns.remove(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 成功 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if (cur === 'error' || cur === 'invalid') { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      console.log( file.statusText ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      showError( file.statusText ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      percentages[ file.id ][ 1 ] = 1; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     if 
     ( cur === 'interrupt' ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      showError( 'interrupt' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     if 
     ( cur === 'queued' ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $info.remove(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $prgress.css('display', 'block'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      percentages[ file.id ][ 1 ] = 0; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     if 
     ( cur === 'progress' ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $info.remove(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $prgress.css('display', 'block'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     if 
     ( cur === 'complete' ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $prgress.hide().width(0); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.append('<span class="success"></span>'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.removeClass('state-' + prev).addClass('state-' + cur); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.on('mouseenter', function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $btns.stop().animate({height: 30}); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.on('mouseleave', function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $btns.stop().animate({height: 0}); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $btns.on('click', 'span', function() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var index = $(this).index(), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      deg; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      switch (index) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 0: 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.removeFile( file ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 1: 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      file.rotation += 90; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 2: 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      file.rotation -= 90; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if (supportTransition) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      deg = 'rotate(' + file.rotation + 'deg)'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap.css({ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '-webkit-transform': deg, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '-mos-transform': deg, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      '-o-transform': deg, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      'transform': deg 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.appendTo($queue); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 負責view的銷燬 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function removeFile( file ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var $li = $('#'+file.id); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      delete percentages[ file.id ]; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      updateTotalProgress(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.off().find('.file-panel').off().end().remove(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function updateTotalProgress() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var loaded = 0, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      total = 0, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      spans = $progress.children(), 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      percent; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $.each( percentages, function( k, v ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      total += v[ 0 ]; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      loaded += v[ 0 ] * v[ 1 ]; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } ) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      percent = total ? loaded / total : 0; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      spans.eq( 0 ).text(Math.round( percent * 100 ) + '%'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      spans.eq( 1 ).css('width', Math.round( percent * 100 ) + '%'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      updateStatus(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function updateStatus() { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var text = '', stats; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( state === 'ready' ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      text = '<s:text name="resource.selected"></s:text>' + fileCount + ', <s:text name="resource.totalSize"></s:text>' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      WebUploader.formatSize(fileSize); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     if 
     ( state === 'confirm' ) 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      stats = uploader.getStats(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( stats.uploadFailNum ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      text = '<s:text name="resource.uploaded"></s:text>' + stats.successNum+ ', <s:text name="resource.failed"></s:text>'+ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      stats.uploadFailNum + ', <a class="retry" href="#" style="color:red;">' + '<s:text name="resource.retry"></s:text>'+'</a>&nbsp;<s:text name="resource.or"></s:text><a class="ignore" href="#" style="color:blue;">&nbsp;<s:text name="resource.ignore"></s:text></a>' 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      stats = uploader.getStats(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      text = '<s:text name="resource.total"></s:text>' + fileCount + '(' + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      WebUploader.formatSize( fileSize ) + 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      ') 
     , <s 
     :text 
      name= 
     "resource.uploaded" 
     ></s 
     :text> 
     :' + stats.successNum 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( stats.uploadFailNum ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      text += ', <s:text name="resource.failed"></s:text>:' + stats.uploadFailNum; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $info.html(text); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      /*關閉上傳框窗口後恢復上傳框初始狀態*/ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function closeUploader() {  
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 移除全部縮略圖並將上傳文件移出上傳序列 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      for (var i = 0; i < uploader.getFiles().length; i++) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 將圖片從上傳序列移除 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.removeFile(uploader.getFiles()[i]); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 將圖片從縮略圖容器移除 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var $li = $('#' + uploader.getFiles()[i].id); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $li.off().remove(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      setState('pedding'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 重置文件總個數和總大小 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileCount = 0; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileSize = 0; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 重置uploader，目前只重置了文件隊列 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.reset(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 更新狀態等，從新計算文件總個數和總大小 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      updateStatus(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function setState( val ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var file, stats; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if ( val === state ) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $upload.removeClass( 'state-' + state ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $upload.addClass( 'state-' + val ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      state = val; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      switch (state) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'pedding': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $placeHolder.removeClass( 'element-invisible' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $queue.hide(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $statusBar.addClass( 'element-invisible' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.refresh(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'ready': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $placeHolder.addClass( 'element-invisible' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $( '#filePicker2' ).removeClass( 'element-invisible'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $queue.show(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $statusBar.removeClass('element-invisible'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.refresh(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'uploading': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $( '#filePicker2' ).addClass( 'element-invisible' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $progress.show(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $upload.text( '<s:text name="resource.pauseupload"></s:text>' ); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var fileArray1 = uploader.getFiles(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var fileNames = []; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileSize = 0; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      for(var i=0; i<fileArray1.length; i++) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileNames.push(fileArray1[i].name); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileSize += fileArray1[i].size; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      filePerSize.push(fileArray1[i].size); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      fileName.push(fileArray1[i].name); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $.extend(true, uploader.options.formData, {"fileSize": fileSize, "multiFileName": fileName, "filePerSize": filePerSize}); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'paused': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $progress.show(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $upload.text('<s:text name="resource.continueupload"></s:text>'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'confirm': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $progress.hide(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $('#filePicker2').removeClass('element-invisible'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $upload.text('<s:text name="resource.starttoupload"></s:text>'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      stats = uploader.getStats(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if (stats.successNum && !stats.uploadFailNum) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      setState('finish'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      case 'finish': 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      stats = uploader.getStats(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //alert(stats.successNum); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if (stats.successNum) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if(flag) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //alert('上傳成功'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      confirmBox("<s:text name='resource.tiptitle'></s:text>", 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      "Upload Success", 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function(tag) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if (tag) { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var url = 'resource/uploadHd.jsp'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      loadUrl(url); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      return; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      }) 
     ; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $("#boxwhite a[name=f]").html("<s:text name="box.no"/>").hide();  
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      $("#boxwhite a[name=t]").html("<s:text name="box.sure"/>"); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      loadUrl('resource/uploadHd.jsp'); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //刷新界面  
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      //setTimeout("loadUrl('resource/uploadHd.jsp')", 1000); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      // 沒有成功的圖片，重設 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      state = 'done'; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      location.reload(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      break; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      updateStatus(); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var flag = true; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      uploader.on("uploadAccept", function(object, ret){ 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if(ret != null && ret != '') { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var data = JSON.parse(ret._raw); 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if(data != null && data != '') { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if(data.resultCode == '1' || data.resultCode == '2') { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      var tip = ''; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      if(data.resultCode == '1') { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      tip = "<s:text name='resource.fileExists'></s:text>"; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
     else 
     { 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      tip = "<s:text name='resource.fileTypeError'></s:text>" + data.message; 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      } 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      confirmBox("<s:text name='resource.tiptitle'></s:text>", 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      tip, 
    
 
   
 
 
  
 
   
 
    
 
   
 
   
 
    
 
      function