webuploader本身造的坑

webuploader是百度的上傳插件，支持html5和flash上傳，點擊下載

由於每次使用的時候都要配置一些屬性，就簡單的擴展了jQuery，下面是代碼

/**
 * Created by zhanghaov on 2018/3/28.
 */
(function($,window,document,WebUploader){
    $.fn.extend({
        uploadFile:function(options){
            //默認配置對象
            var self = this;
            var defaults = {
                swf:'/uploaderTest/webuploader-0.1.5/Uploader.swf',
                auto:true,
                server: null,
                pick: this,
                resize: false,
                duplicate:true,//去除重複
                accept: null,//類型
                fileNumLimit:undefined, //數量限制
                thumb:{
                    width: 110,
                    height: 110,
                    quality: 70,
                    allowMagnify: false,
                    crop: true
                },
                modelType:"normal", //first:normal   second:list  third:head
                isProgress:false, //是否展現進度條
                success:function(obj){

                },
                error:function(){

                }
            }
            //合併後的配置對象
            var settings = $.extend({},defaults,options);
            var uploader = WebUploader.create(settings);
            console.log(settings);
            // 當有文件被添加進隊列的時候
            uploader.on( 'fileQueued', function( file ) {
                /*
                 * 頭像上傳
                 *
                 * */
                if(settings.modelType == "head"){
                    self.find(".file-item").remove();
                    var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img width="100%;height:100%;">' +
                            '</div>'
                        ),
                        $img = $li.find('img');

                    // $list爲容器jQuery實例
                    self.find('.webuploader-pick').prepend( $li );

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

                        $img.attr( 'src', src );
                    }, 82, 82 );
                }else
                /*
                 * 普通的按鈕上傳
                 * */
                if(settings.modelType == "link"){
                    console.log("aaa");
                }

            });

            //文件上傳成功
            uploader.on( 'uploadSuccess', function( file,data ) {
                settings.success(data);
            });

            //文件上傳失敗
            uploader.on( 'uploadError', function( file ) {
                uploader.reset();
            });

            //無論上傳成功或失敗  都會執行
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            // 文件上傳過程當中 進度條是否展現
            if(settings.isProgress){
                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.refresh();

        }
    });
})(jQuery,window,document,WebUploader);

使用$(選擇器).uploadFile([options])，可是ie8點擊沒反應，本覺得是沒有找到Uploader.swf文件，以前由於路徑寫錯致使flash上傳的時候點擊無效。

可是此次不是，找了好久問題,打了不少斷點，發現settings對象的屬性有問題
緣由就是在使用$.extend()時候，也就是這句

var settings = $.extend({},defaults,options);

少寫了一個參數true，沒有實現深繼承,改成下面這句就行了

var settings = $.extend(true,{},defaults,options);