jquery文件上传控件 WebUploader

时间 2019-11-29

标签 jquery 文件上传控件 webuploader 栏目 JQuery 繁體版

原文原文链接

WebUploader是百度开源的一个文件上传组件，由于其操做简洁大方，就在项目中使用了，记录一下。 javascript

效果是这样子：

这个样子是默认的效果。php

这个是选择上传的图片，能够批量，选择后能够删除和添加更多。css

这个是上传过程显示的效果。html

 
 
 
 
  
  
  
  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作的修改：java

  
 
   
    
     
    
    
     
     (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