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

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

  1 /*************************************
  2 *功能：上传对象，通过该类实现上传，进度条，完成等事件的控制
  3 *日期：2017/08/23
  4 **************************************/
  5 (function (d) {
  6     var BaseUpload = function () {
  7         this.uploader={};
  8         this.Filelength= 0;//当前文件队列长度
  9         this.fileDisplayArray = [];//文件节点队列
 10     }
 11 
 12     BaseUpload.prototype = {
 13         onload: function (option) {
 14             this.config.bind(option);
 15             this.fileOption = option.fileOption;//通过fileOption对象来实现上传结果的输出
 16             this.extensions = option.extensions;//要过滤的上传内容
 17             if (option.uploadType === "file") {
 18                 this.uploader = new plupload.Uploader(this.config);
 19             } else if (typeof WebkitUploader !== "undefined") {
 20                 this.uploader = new WebkitUploader(this.config);
 21             }
 22             
 23             this.uploader.init();
 24             
 25             this.BindEvnet();
 26         },
 27         BindEvnet: function () {
 28             var _this = this;
 29             //绑定文件添加进队列事件
 30             this.uploader.bind('FilesAdded', function (uploader, files) {
 31                 _this.FilesAdded(_this, uploader, files);
 32             });
 33             //进度条事件
 34             this.uploader.bind('UploadProgress', function (uploader, file) {
 35                 for (var i = 0; i < uploader.files.length; i++)
 36                 {
 37                     if(uploader.files[i].id===file.id)
 38                     {
 39                         uploader.files[i].block.updateProgress(uploader.files[i]);
 40                         break;
 41                     }
 42                 }
 43             });
 44             //上传成功则回调该方法
 45             this.uploader.callBack = function (file, jsonstr) {
 46                 _this.fileOption.complete(file, jsonstr);
 47             };
 48         },
 49         FilesAdded: function (_this, uploader, files) {
 50             if (this.fileOption.checkFiles(files, this.extensions))
 51             {
 52                 uploader.files = this.fileOption.prepare(files);
 53                 uploader.start(); //开始自动上传
 54             }
 55         },  
 56         config: {
 57             flash_swf_url: '/Content/Js/plupload/Moxie.swf',
 58             silverlight_xap_url: '/Content/Js/plupload/Moxie.xap',
 59             bind: function (option) {
 60                 this.url = option.url;
 61                 this.filters.extensions = option.extensions;
 62                 this.filters.init();
 63                 this.browse_button = option.browse_button;
 64                 this.multi_selection = option.multi_selection;
 65                 this.drop_element = option.drop_element;
 66                 this.init.callBack = option.callBack;
 67             },
 68             filters: {
 69                 init: function (extensions) {
 70                     this.mime_types = [{ title: "文档文件", extensions: this.extensions }];
 71                 },
 72                 max_file_size: '1000mb', //最大文件限制  
 73                 file_size: '1250mb',    //一次上传数据大小  
 74                 unique_names: true, //是否自动生成唯一名称  
 75                 prevent_duplicates: false //不允许队列中存在重复文件
 76             },
 77             
 78             multipart: true, //以multipart/form-data的形式来上传文件
 79             multipart_params: {
 80                 'sourceid': '1'
 81             },
 82             max_retries: 3, //当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试
 83             chunk_size: 0, //分片上传文件时，每片文件被切割成的大小，为数字时单位为字节。也可以使用一个带单位的字符串，如"200kb"。当该值为0时表示不使用分片上传功能
 84             unique_names: false, //当值为true时会为每个上传的文件生成一个唯一的文件名，并作为额外的参数post到服务器端，参数明为name,值为生成的文件名。
 85             file_data_name: 'file', //指定文件上传时文件域的名称，默认为file,如Request.QueryString["file"];
 86             init: {
 87                 FileUploaded: function (up, file, info) {
 88                     if (info.response != null) {
 89                         var jsonstr = eval("(" + info.response + ")");
 90                         this.callBack(file, jsonstr);
 91                         if (!jsonstr.IsSuccess) {
 92                             $.alert(jsonstr.Message); //错误提示
 93                         };
 94                     };
 95                 },
 96                 Error: function (up, args) {
 97                     fileSize = 0;
 98                     //发生错误  
 99                     if (args.file) {
100                         if (args.file.size > 30 * 1024 * 1024) {
101                             $.alert('上传文件大于30MB,请使用e网通上传');
102                         }
103                     } 
104                     this.callBack(args.file, { IsSuccess:false});
105                 }
106             }
107         }
108 
109     };
110     window.BaseUpload = BaseUpload;
111    
112 })(document);

View Code