WebUploader檔案圖片上傳外掛程式的使用

標籤：end   不能   web   自動產生   log   dev   .com   ref   strong   

　　最近在項目中用到了百度的檔案圖片上傳外掛程式WebUploader。分享給大家

　　需要在http://fex.baidu.com/webuploader/download.html點擊開啟連結下載WebUploader

/*圖片上傳 */    var $ = jQuery,        $img=$("#imagePath_img"),    // 最佳化retina, 在retina下這個值是2    ratio = window.devicePixelRatio || 1,    // 縮圖大小    thumbnailWidth = 1 * ratio,    thumbnailHeight = 1 * ratio,    // Web Uploader執行個體    uploader;// 初始化Web Uploader***上傳圖片uploader = WebUploader.create({    // 選完檔案後，是否自動上傳。    auto: true,    // swf檔案路徑    swf: ‘${basePath}/scripts/jQuery/plugins/webuploader/Uploader.swf‘,    // // 檔案接收服務端地址，自動產生縮圖需要後端完成。    server: ‘${basePath}/policy/policyFileAction_add.do?policyFile.policyId=‘+$("#policyId_hidden").val()+‘&policyFile.originalId=‘+$("#originalId_hidden").val()+‘&policyFile.type=0‘,    //或例子：server: ‘/common/uploadFile?imageZip=1‘,    // 選擇檔案的按鈕。可選。    // 內部根據當前運行是建立，可能是input元素，也可能是flash.    pick: ‘#sendimg‘,    fileNumLimit: 5,    //allowMagnify: false,     duplicate:true,//允許上傳重複檔案    // 只允許選擇圖片檔案。    accept:{    title: ‘Images‘,    extensions: ‘gif,jpg,jpeg,bmp,png‘,    mimeTypes: ‘image/*‘    }});uploader.on("error",function (type){    if (type=="Q_TYPE_DENIED"){        dialogMsg(‘請上傳JPG、JPEG、PNG、BMP格式檔案！‘,0);    }});// 當有檔案添加進來的時候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 );//可以寫為thumbnailWidth,  thumbnailHeight    $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();});

 

WebUploader檔案圖片上傳外掛程式的使用