DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jQuery插件WebUploader實現文件上傳
jQuery插件WebUploader實現文件上傳
編輯:JQuery入門技巧     

最近在項目中用到了百度的文件圖片上傳插件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上傳操作匯總》,進行深入學習和研究。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved