上傳圖片插件web upload

 

官網地址：http://fex.baidu.com/webuploader/getting-started.html

 

html：

<!--dom結構部分-->
<div id="uploader-demo">
    <!--用來存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">選擇圖片</div>
</div>

 

css3

.webuploader-container {
    position: relative;
}
.webuploader-element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #00b7ee;
    padding: 10px 15px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}
.webuploader-pick-hover {
    background: #00a2d4;
}

.webuploader-pick-disable {
    opacity: 0.6;
    pointer-events:none;
}

 

JavaScript

//id -> 存放圖片  width，height  存放圖片尺寸寬高  id2 按鈕  allMaxSize圖片大小
function picUpload(id,width,height,id2,allMaxSize){

    var $ = jQuery,
        $list = $(id),
    // 優化retina, 在retina下這個值是2
        ratio = window.devicePixelRatio || 1,

    // 縮略圖大小
        thumbnailWidth = width * ratio,
        thumbnailHeight = height * ratio,

    //allMaxSize = 1,//限制圖片大小

    // Web Uploader實例
        uploader;

    // 初始化Web Uploader
    uploader = WebUploader.create({

        // 自動上傳。
        auto: true,

        // swf文件路徑
        swf: 'E:/work/seller/public/img/common',

        // 文件接收服務端。
        server: 'http://webuploader.duapp.com/server/fileupload.php',

        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是創建，可能是input元素，也可能是flash.
        pick: id2,

        duplicate :true,//是否可以重復上傳

        fileSizeLimit: allMaxSize*1024*1024, //限制圖片大小，不可以超過

        compress: null,

        // 只允許選擇文件，可選。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'   //修改這行，加快上傳文件框的打開速度
        }
    });

    // 當有文件添加進來的時候
    uploader.on( 'fileQueued', function( file ) {
        $list.empty(); //清空之前上傳的文件

        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
            ),
            $img = $li.find('img');

        $list.append( $li );

        // 創建縮略圖
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能預覽</span>');
                return;
            }

            //去掉默認的頭像，清空圖片名字的信息
            $('.webuploader-pick img').attr('src','')
            $('.file-item .info').empty();

            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );

    });

    // 文件上傳過程中創建進度條實時顯示。
    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 ) {
        $( '#'+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();
    });

    //  驗證大小
    uploader.on("error",function (type){

         if(type == "Q_EXCEED_SIZE_LIMIT"){
            window.alert("系統提示:所選圖片總大小不可超過" + allMaxSize + "M哦！換個小點的文件吧！");
        }

        // 判斷傳入的是不是函數
        /*  if( jQuery.isFunction(sideFun) ){
         sideFun(type,allMaxSize);
         }else {
         //不是函數
         console.log(2)
         return false;
         }*/
        /*  if(sideFun === 'undefined'){
         return true;
         }else{
         sideFun(type,allMaxSize);
         }
         */
    });


}


//調用
picUpload('#fileList',100,100,'#filePicker',10000);