pupload上传插件问题整理

　　 前些日子公司网站需要开发一个类似与百度文库上传文档的功能，实现文档的批量上传、展示以及继续上传的功能。开发完成后，通过在多版浏览器下的使用，发现了一系列问题，特总结于下，以免来者在这些问题上耗费太多时间。

　　问题一，在IE8、9下，上传页面隐藏后无法继续上传且继续上传的按钮不再可以使用。

　　　　　原因：在IE8、9下，pupload采用的是flash上传，在上传按钮隐藏后，插件上传就会出错，也不支持在别处调用上传按钮的事件。

　　　　　解决方案：调整需求，在当前页面完成上传后再行跳转。

　　问题二，在IE9下，点击上传按钮，上传返回的结果是正确的，但在脚本中无法获取到上传结果

　　　　   原因：我们开发的新功能嵌入到了老页面当中，两个页面域名不一致，需要解决跨域问题，页面一旦出现document.domain=""这种语句，就会有相应问题

                解决方案：延迟使用document.domain，在上传完毕后再调用该语句。

       问题三，在调用进度条事件时，返回的file对象不包含我再该对象中绑定的内容，代码如下：

      this.uploader.bind('UploadProgress', function (uploader, file) {
                        file.block.updateProgress(uploader.files[i]);
            });

　　　解决方案：经过跟踪发现，在uploader参数的files中包含绑定的对象，于是搜索uploader中的相应对象，修改后的代码如下：

        //进度条事件
            this.uploader.bind('UploadProgress', function (uploader, file) {
                for (var i = 0; i < uploader.files.length; i++)
                {
                    if(uploader.files[i].id===file.id)
                    {
                        uploader.files[i].block.updateProgress(uploader.files[i]);
                        break;
                    }
                }
            });

　　以上系在开发测试过程当中遇到的主要的一些问题，下面列出我封装的上传方法，供需要的朋友参考使用：

/*************************************
*功能：上传对象，通过该类实现上传，进度条，完成等事件的控制
*日期：2017/08/23
**************************************/
(function (d) {
    var BaseUpload = function () {
        this.uploader={};
        this.Filelength= 0;//当前文件队列长度
        this.fileDisplayArray = [];//文件节点队列
    }

    BaseUpload.prototype = {
        onload: function (option) {
            this.config.bind(option);
            this.fileOption = option.fileOption;//通过fileOption对象来实现上传结果的输出
            this.extensions = option.extensions;//要过滤的上传内容
            if (option.uploadType === "file") {
                this.uploader = new plupload.Uploader(this.config);
            } else if (typeof WebkitUploader !== "undefined") {
                this.uploader = new WebkitUploader(this.config);
            }
            
            this.uploader.init();
            
            this.BindEvnet();
        },
        BindEvnet: function () {
            var _this = this;
            //绑定文件添加进队列事件
            this.uploader.bind('FilesAdded', function (uploader, files) {
                _this.FilesAdded(_this, uploader, files);
            });
            //进度条事件
            this.uploader.bind('UploadProgress', function (uploader, file) {
                for (var i = 0; i < uploader.files.length; i++)
                {
                    if(uploader.files[i].id===file.id)
                    {
                        uploader.files[i].block.updateProgress(uploader.files[i]);
                        break;
                    }
                }
            });
            //上传成功则回调该方法
            this.uploader.callBack = function (file, jsonstr) {
                _this.fileOption.complete(file, jsonstr);
            };
        },
        FilesAdded: function (_this, uploader, files) {
            if (this.fileOption.checkFiles(files, this.extensions))
            {
                uploader.files = this.fileOption.prepare(files);
                uploader.start(); //开始自动上传
            }
        },  
        config: {
            flash_swf_url: '/Content/Js/plupload/Moxie.swf',
            silverlight_xap_url: '/Content/Js/plupload/Moxie.xap',
            bind: function (option) {
                this.url = option.url;
                this.filters.extensions = option.extensions;
                this.filters.init();
                this.browse_button = option.browse_button;
                this.multi_selection = option.multi_selection;
                this.drop_element = option.drop_element;
                this.init.callBack = option.callBack;
            },
            filters: {
                init: function (extensions) {
                    this.mime_types = [{ title: "文档文件", extensions: this.extensions }];
                },
                max_file_size: '1000mb', //最大文件限制  
                file_size: '1250mb',    //一次上传数据大小  
                unique_names: true, //是否自动生成唯一名称  
                prevent_duplicates: false //不允许队列中存在重复文件
            },
            
            multipart: true, //以multipart/form-data的形式来上传文件
            multipart_params: {
                'sourceid': '1'
            },
            max_retries: 3, //当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试
            chunk_size: 0, //分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。也可以使用一个带单位的字符串，如"200kb"。当该值为0时表示不使用分片上传功能
            unique_names: false, //当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
            file_data_name: 'file', //指定文件上传时文件域的名称，默认为file,如Request.QueryString["file"];
            init: {
                FileUploaded: function (up, file, info) {
                    if (info.response != null) {
                        var jsonstr = eval("(" + info.response + ")");
                        this.callBack(file, jsonstr);
                        if (!jsonstr.IsSuccess) {
                            $.alert(jsonstr.Message); //错误提示
                        };
                    };
                },
                Error: function (up, args) {
                    fileSize = 0;
                    //发生错误  
                    if (args.file) {
                        if (args.file.size > 30 * 1024 * 1024) {
                            $.alert('上传文件大于30MB,请使用e网通上传');
                        }
                    } 
                    this.callBack(args.file, { IsSuccess:false});
                }
            }
        }

    };
    window.BaseUpload = BaseUpload;
   
})(document);