DIV CSS 佈局教程網

最近在項目中用到了百度的文件圖片上傳插件WebUploader，分享給大家。

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的浏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE浏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，同樣的調用方式，可供用戶任意選用。 采用大文件分片並發上傳，極大的提高了文件上傳效率。

需要在http://fex.baidu.com/webuploader/download.html點擊打開鏈接下載WebUploader

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

更多精彩內容，請點擊《jQuery上傳操作匯總》，進行深入學習和研究。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。