最近在項目中用到了百度的文件圖片上傳插件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上傳操作匯總》,進行深入學習和研究。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。