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

來源:互聯網
上載者:User

標籤: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檔案圖片上傳外掛程式的使用

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.