// 初始化Web Uploader***上傳圖片 
var uploader = WebUploader.create({ 
 // 選完文件后，是否自動(dòng)上傳。 
 auto: true, 
 // 文件接收服務(wù)端地址，自動(dòng)生成縮略圖需要后端完成。 
 server: '/common/uploadFile?imageZip=1', 
 // 選擇文件的按鈕。可選。 
 // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash. 
 pick: '#sendimg', 
 fileNumLimit: 5, 
 //allowMagnify: false, 
 // 只允許選擇圖片文件。 
 accept:{ 
 title: 'Images', 
 extensions: 'gif,jpg,jpeg,bmp,png', 
 mimeTypes: 'image/*' 
 } 
}); 
// 當(dāng)有文件添加進(jìn)來(lái)的時(shí)候 
 uploader.on( 'fileQueued', function( file ) { 
 var $li = $( 
  '<div style="float:right" id="' + file.id + '" class="delimg">' + 
   '<img class="addimg"><div class="closeimg">×</div>' + 
  '</div>' 
  ), 
 $img = $li.find('img'); 
 
 // $list為容器jQuery實(shí)例 
 $("#piccon").append( $li ); 
 // 創(chuàng)建縮略圖 
 // 如果為非圖片文件，可以不用調(diào)用此方法。 
 // thumbnailWidth x thumbnailHeight 為 100 x 100 
 uploader.makeThumb( file, function( error, src ) { 
  if ( error ) { 
  $img.replaceWith('<span>不能預(yù)覽</span>'); 
  return; 
  } 
 
  $img.attr( 'src', src ); 
 }, 100, 100 ); 
 $li.on('click', function() { 
  $(this).remove(); 
 }) 
 }); 
 // 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。 
 uploader.on( 'uploadProgress', function( file, percentage ) { 
  var $li = $( '#'+file.id ), 
  $percent = $li.find('.progress span'); 
  
  // 避免重復(fù)創(chuàng)建 
  if ( !$percent.length ) { 
  $percent = $('<p class="progress"><span></span></p>') 
   .appendTo( $li ) 
   .find('span'); 
  } 
  
  $percent.css( 'width', percentage * 100 + '%' ); 
 }); 
  
 // 文件上傳成功，給item添加成功class, 用樣式標(biāo)記上傳成功。 
 uploader.on( 'uploadSuccess', function( file,response ) { 
  imgurl=response.fileName;//這里可以拿到后臺(tái)返回的圖片名稱(chēng) 
  //alert(imgurl); 
  $( '#'+file.id ).addClass('upload-state-done'); 
 }); 
  
 // 文件上傳失敗，顯示上傳出錯(cuò)。 
 uploader.on( 'uploadError', function( file ) { 
  var $li = $( '#'+file.id ), 
  $error = $li.find('div.error'); 
  
  // 避免重復(fù)創(chuàng)建 
  if ( !$error.length ) { 
  $error = $('<div class="error"></div>').appendTo( $li ); 
  } 
  
  $error.text('上傳失敗'); 
 }); 
  
 // 完成上傳完了，成功或者失敗，先刪除進(jìn)度條。 
 uploader.on( 'uploadComplete', function( file ) { 
  $( '#'+file.id ).find('.progress').remove(); 
 });