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