web上傳文件及圖片插件（WebUploader）使用案例

 

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夾/webuploader.js"></script>

 

    <div style="padding: 100px;">
        <ul class="upload-ul clearfix">
            <li class="upload-pick">
                <div class="webuploader-container clearfix" id="goodsUpload"></div>
            </li>
        </ul>

        <p><a class="upload-btn" href="javascript:;">提交</a></p>

    </div>
    <div id="thelist" class="uploader-list"></div>
    <div style="color: orange; position: absolute; bottom: 10px;">
        &emsp;提示：支持上傳圖片格式：gif,jpg,jpeg,bmp,png，支持同時選擇多張圖片批量上傳，圖片建議1MB以下（自行壓縮）；
    </div>

 

公共封裝方法diyUpload.js

/* 
 *    jQuery文件上傳插件,封裝UI,上傳處理操作采用Baidu WebUploader;
 *    diyUpload.js;
 */
(function( $ ) {

    $.fn.extend({
        /*
         *    上傳方法 opt為參數配置;
         *    serverCallBack回調函數 每個文件上傳至服務端后,服務端返回參數,無論成功失敗都會調用 參數為服務器返回信息;
         */
        diyUpload:function( opt, serverCallBack ) {
            if ( typeof opt != "object" ) {
                alert('參數錯誤!');
                return;
            }

            var $fileInput = $(this);
            var $fileInputId = $fileInput.attr('id');

            //組裝參數;
            if( opt.url ) {
                opt.server = opt.url;
                delete opt.url;
            }

            if( opt.success ) {
                var successCallBack = opt.success;
                delete opt.success;
            }

            if( opt.error ) {
                var errorCallBack = opt.error;
                delete opt.error;
            }

            //迭代出默認配置
            $.each( getOption( '#'+$fileInputId ),function( key, value ){
                opt[ key ] = opt[ key ] || value;
            });

            if ( opt.buttonText ) {
                opt['pick']['label'] = opt.buttonText;
                delete opt.buttonText;
            }

            var webUploader = getUploader( opt );

            if ( !WebUploader.Uploader.support() ) {
                alert( ' 上傳組件不支持您的瀏覽器！');
                return false;
            }

            //綁定文件加入隊列事件;
            webUploader.on('fileQueued', function( file ) {
                createBox( $fileInput, file ,webUploader);

            });

            //進度條事件
            webUploader.on('uploadProgress',function( file, percentage  ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar');
                $diyBar.show();
                percentage = percentage*100;
                showDiyProgress( percentage.toFixed(2), $diyBar);

            });

            //全部上傳結束后觸發;
            webUploader.on('uploadFinished', function(){
                $fileInput.next('.parentFileBox').children('.diyButton').remove();
            });
            //綁定發送至服務端返回后觸發事件;
            webUploader.on('uploadAccept', function( object ,data ){
                if ( serverCallBack ) serverCallBack( data );
            });

            //上傳成功后觸發事件;
            webUploader.on('uploadSuccess',function( file, response ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar');
                $fileBox.removeClass('diyUploadHover');
                $diyBar.fadeOut( 1000 ,function(){
                    $fileBox.children('.diySuccess').show();
                });
                if ( successCallBack ) {
                    successCallBack( response );
                }
            });

            //上傳失敗后觸發事件;
            webUploader.on('uploadError',function( file, reason ){
                var $fileBox = $('#fileBox_'+file.id);
                var $diyBar = $fileBox.find('.diyBar');
                showDiyProgress( 0, $diyBar , '上傳失敗!' );
                var err = '上傳失敗! 文件:'+file.name+' 錯誤碼:'+reason;
                if ( errorCallBack ) {
                    errorCallBack( err );
                }
            });

            //選擇文件錯誤觸發事件;
            webUploader.on('error', function( code ) {
                var text = '';
                switch( code ) {
                    case  'F_DUPLICATE' : text = '該文件已經被選擇了!' ;
                        break;
                    case  'Q_EXCEED_NUM_LIMIT' : text = '上傳文件數量超過限制!' ;
                        break;
                    case  'F_EXCEED_SIZE' : text = '文件大小超過限制!';
                        break;
                    case  'Q_EXCEED_SIZE_LIMIT' : text = '所有文件總大小超過限制!';
                        break;
                    case 'Q_TYPE_DENIED' : text = '文件類型不正確或者是空文件!';
                        break;
                    default : text = '未知錯誤!';
                        break;
                }
                alert( text );
            });
             return webUploader;
        }
    });

    //Web Uploader默認配置;
    function getOption(objId) {
        /*
         *    配置文件同webUploader一致,這里只給出默認配置.
         *    具體參照:http://fex.baidu.com/webuploader/doc/index.html
         */
        return {
            //按鈕容器;
            pick:{
                id:objId,
                label:""
            },
            //類型限制;
            accept:{
                title:"Images",
                extensions:"gif,jpg,jpeg,bmp,png",
                mimeTypes:"image/*"
            },
            //配置生成縮略圖的選項
            thumb:{
                width:160,
                height:120,
                // 圖片質量，只有type為`image/jpeg`的時候才有效。
                quality:90,
                // 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.
                allowMagnify:false,
                // 是否允許裁剪。
                crop:true,
                // 為空的話則保留原有圖片格式。
                // 否則強制轉換成指定的類型。
                type:"image/jpeg"
            },
            //文件上傳方式
            method:"POST",
            //服務器地址;
            server:"",
            //是否已二進制的流的方式發送文件，這樣整個上傳內容php://input都為文件內容
            sendAsBinary:false,
            // 禁止分片上傳。 thinkphp的上傳類測試分片無效,圖片丟失;
            chunked:false,
            // 分片大小
            chunkSize:512 * 1024,
            //最大上傳的文件數量, 總文件大小,單個文件大小(單位字節);
            fileNumLimit:50,
            fileSizeLimit:500000 * 1024,
            fileSingleSizeLimit:50000 * 1024,
        };
    }

    //實例化Web Uploader
    function getUploader( opt ) {

        return new WebUploader.Uploader( opt );
    }

    //操作進度條;
    function showDiyProgress( progress, $diyBar, text ) {
        if ( progress >= 100 ) {
            progress = progress + '%';
            text = text || '上傳完成';
        } else {
            progress = progress + '%';
            text = text || progress;
        }

        var $diyProgress = $diyBar.find('.diyProgress');
        $diyProgress.width( progress ).text( text );

    }

    //取消事件;
    function removeLi ( $li ,file_id ,webUploader) {
        webUploader.removeFile( file_id );
        $li.remove();
    }

    //左移事件;
    function leftLi ($leftli, $li) {
        $li.insertBefore($leftli);
    }

    //右移事件;
    function rightLi ($rightli, $li) {
        $li.insertAfter($rightli);
    }

    //創建文件操作div;
    function createBox( $fileInput, file, webUploader ) {
        var file_id = file.id;
        var $parentFileBox = $fileInput.parents(".upload-ul");
        var file_len=$parentFileBox.children(".diyUploadHover").length;

        //添加子容器;
        var li = '<li id="fileBox_'+file_id+'" class="diyUploadHover"> \
                    <div class="viewThumb">\
                        <input type="hidden">\
                        <div class="diyBar"> \
                            <div class="diyProgress">0%</div> \
                        </div> \
                        <p class="diyControl"><span class="diyLeft"><i></i></span><span class="diyCancel"><i></i></span><span class="diyRight"><i></i></span></p>\
                    </div> \
                </li>';

        $parentFileBox.prepend( li );

        var $fileBox = $parentFileBox.find('#fileBox_'+file_id);

        //綁定取消事件;
        var $diyCancel = $fileBox.find('.diyCancel').one('click',function(){
            removeLi( $(this).parents('.diyUploadHover'), file_id, webUploader );
        });

        //綁定左移事件;
        $fileBox.find('.diyLeft').on('click',function(){
            leftLi($(this).parents('.diyUploadHover').prev(), $(this).parents('.diyUploadHover'));
        });

        //綁定右移事件;
        $fileBox.find('.diyRight').on('click',function(){
            rightLi($(this).parents('.diyUploadHover').next(), $(this).parents('.diyUploadHover') );
        });

        if ( file.type.split("/")[0] != 'image' ) {
            var liClassName = getFileTypeClassName( file.name.split(".").pop() );
            $fileBox.addClass(liClassName);
            return;
        }

        //生成預覽縮略圖;
        webUploader.makeThumb( file, function( error, dataSrc ) {
            if ( !error ) {
                $fileBox.find('.viewThumb').append('<img src="'+dataSrc+'" >');
            }
        });
    }

    //獲取文件類型;
    function getFileTypeClassName ( type ) {
        var fileType = {};
        var suffix = '_diy_bg';
        fileType['pdf'] = 'pdf';
        fileType['ppt'] = 'ppt';
        fileType['doc'] = 'doc';
        fileType['docx'] = 'doc';
        fileType['jpg'] = 'jpg';
        fileType['zip'] = 'zip';
        fileType['rar'] = 'rar';
        fileType['xls'] = 'xls';
        fileType['xlsx'] = 'xls';
        fileType['txt'] = 'txt';
        fileType = fileType[type] || 'ppt';
        return     fileType+suffix;
    }

})( jQuery );

調用

         //全局變量
        var _MainCate = RequestFrom("MainCate");
        var _SubCate = RequestFrom("SubCate");
        var _OwnerID = RequestFrom("OwnerID");
        var _Folder = RequestFrom("Folder");

        $(function () {
            //上傳圖片
            var $tgaUpload = $('#goodsUpload').diyUpload({
                swf: '/UILib/WebUploader/Uploader.swf',
                chunked: false,//禁止分片上傳
                formData: {
                    MainCate: _MainCate,
                    SubCate: _SubCate,
                    OwnerID: _OwnerID,
                    Folder: _Folder
                },
                // 文件接收服務端。
                server: '/Common/UploadFile.ashx?action=AddFile',
                success: function (data) {
                    showTipsMsg("上傳完成！", '2500', '3');
                },
                error: function (err) {
                    showTipsMsg("上傳失敗，請刷新后重試！", '2500', '3');
                },
                buttonText: '',
                accept: {
                    title: "Images",
                    extensions: 'gif,jpg,jpeg,bmp,png,docx,doc'
                },
                thumb: {
                    width: 120,
                    height: 90,
                    quality: 100,
                    allowMagnify: true,
                    crop: true,
                    type: "image/jpeg"
                }
            });

            $(".upload-btn").on("click", function () {
                $tgaUpload.upload();
            });
        });


        //var uploader = WebUploader.create({
        //    swf: '/UILib/WebUploader/Uploader.swf',
        //    formData: {
        //        vType: $("#hidType").val(),
        //        vType1: $("#hidType1").val()
        //    },
        //    // 文件接收服務端。
        //    server: '/AutoData/Ajax/FileUpload.ashx',
        //    // 選擇文件的按鈕。可選。
        //    // 內部根據當前運行是創建，可能是input元素，也可能是flash.
        //    pick: '#goodsUpload',
        //    // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！
        //    resize: false,
        //});

        //// 當有文件被添加進隊列的時候
        //uploader.on('fileQueued', function (file) {
        //    $("#thelist").append('<div id="' + file.id + '" class="item">' +
        //        '<h4 class="info">' + file.name + '</h4>' +
        //        '<p class="state">等待上傳...</p>' +
        //    '</div>');
        //});

        //// 文件上傳過程中創建進度條實時顯示。
        //uploader.on('uploadProgress', function (file, percentage) {
        //    var $li = $('#' + file.id),
        //        $percent = $li.find('.progress .progress-bar');

        //    // 避免重復創建
        //    if (!$percent.length) {
        //        $percent = $('<div class="progress progress-striped active">' +
        //          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
        //          '</div>' +
        //        '</div>').appendTo($li).find('.progress-bar');
        //    }
        //    $li.find('p.state').text('上傳中');
        //    $percent.css('width', percentage * 100 + '%');
        //});

        //uploader.on('uploadSuccess', function (file, response) {
        //    if (response.message == "1") {
        //        $('#' + file.id).find('p.state').text('已上傳');
        //    } else {
        //        $('#' + file.id).find('p.state').text('上傳失敗');
        //    }
        //});

        //uploader.on('uploadError', function (file, response) {
        //    $('#' + file.id).find('p.state').text('上傳出錯');
        //});

        //uploader.on('uploadComplete', function (file, response) {
        //    $('#' + file.id).find('.progress').fadeOut();
        //});
        //uploader.on('uploadBeforeSend', function (obj, data, headers) {
        //    data.vType = $("#hidType").val();
        //    data.vType1 = $("#hidType1").val();
        //});

        //$("#ctlBtn").click(function () {
        //    if ($(this).hasClass('disabled')) {
        //        return false;
        //    };
        //    uploader.upload();
        //});

        //$("#tabs a").click(function () {
        //    $(uploader.getFiles()).each(
        //        function () {
        //            uploader.removeFile($(this));
        //        })

        //    uploader.reset();
        //    $("#thelist").html("");

        //    var vFlag = $(this).attr("name");
        //    if (vFlag == "2") {
        //        $("#hidType1").val($("#hidType").val());
        //    } else if (vFlag == "1") {
        //        $("#hidType1").val("58");
        //    }
        //});    

 

 將大文件分片處理上傳需將 chunked 設置為true；后台接收參考》