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);