Webuploader's own pit

webuploader is Baidu's upload plug-in, supports html5 and flash upload, click to download

Because you have to configure some properties every time you use it, you simply extend jQuery. The following is the code

/**
 * Created by zhanghaov on 2018/3/28.
 */
(function($,window,document,WebUploader){
    $.fn.extend({
        uploadFile:function(options){
            //default configuration object
            var self = this;
            var defaults = {
                swf:'/uploaderTest/webuploader-0.1.5/Uploader.swf',
                auto: true,
                server: null,
                pick: this,
                resize: false,
                duplicate:true,//Remove duplicates
                accept: null,//type
                fileNumLimit:undefined, //quantity limit
                thumb:{
                    width: 110,
                    height: 110,
                    quality: 70,
                    allowMagnify: false,
                    crop: true
                },
                modelType:"normal", //first:normal   second:list  third:head
                isProgress:false, //whether to display the progress bar
                success:function(obj){

                },
                error:function(){

                }
            }
            //The merged configuration object
            var settings = $.extend({},defaults,options);
            var uploader = WebUploader.create (settings);
            console.log(settings);
            // when a file is added to the queue
            uploader.on( 'fileQueued', function( file ) {
                /*
                 * Avatar upload
                 *
                 * */
                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 is the container jQuery instance
                    self.find('.webuploader-pick').prepend( $li );

                    //create thumbnail
                    uploader.makeThumb( file, function( error, src ) {
                        if ( error ) {
                            $img.replaceWith('<span>cannot preview</span>');
                            return;
                        }

                        $img.attr( 'src', src );
                    }, 82, 82 );
                }else
                /*
                 * Normal button upload
                 * */
                if(settings.modelType == "link"){
                    console.log("aaa");
                }

            });

            // file upload successfully
            uploader.on( 'uploadSuccess', function( file,data ) {
                settings.success(data);
            });

            // file upload failed
            uploader.on( 'uploadError', function( file ) {
                uploader.reset();
            });

            //Whether the upload succeeds or fails, it will be executed
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            // Whether the progress bar is displayed during the file upload process
            if(settings.isProgress){
                uploader.on( 'uploadProgress', function( file, percentage ) {
                    var $ li = $ ('#' + file.id),
                        $percent = $li.find('.progress .progress-bar');

                    // avoid duplicate creation
                    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('Uploading');

                    $percent.css( 'width', percentage * 100 + '%' );
                });
            }

            //Normal upload with preview function
            uploader.refresh();

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

Use $(selector).uploadFile([options]), but ie8 click does not respond, I thought the Uploader.swf file was not found, and the click was invalid when the flash upload was wrong because of the wrong path.

But not this time, I searched for a long time, hit a lot of breakpoints, and found that there is a problem with the properties of the settings object. The
reason is that when using $.extend(), that is the sentence

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

One less parameter true is written, no deep inheritance is implemented, just change the following sentence

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