最近在項(xiàng)目中用到了百度的文件圖片上傳插件WebUploader,分享給大家。
WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主,F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì),同時(shí)又不摒棄主流IE瀏覽器,沿用原來(lái)的FLASH運(yùn)行時(shí),兼容IE6+,iOS 6+, android 4+。兩套運(yùn)行時(shí),同樣的調(diào)用方式,可供用戶(hù)任意選用。 采用大文件分片并發(fā)上傳,極大的提高了文件上傳效率。
需要在http://fex.baidu.com/webuploader/download.html點(diǎn)擊打開(kāi)鏈接下載WebUploader
 // 初始化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();  }); 更多精彩內(nèi)容,請(qǐng)點(diǎn)擊《jQuery上傳操作匯總》,進(jìn)行深入學(xué)習(xí)和研究。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注