使用Puploader组件上传文件时的multipart_params参数问题(详细)

使用Puploader组件上传文件时的multipart_params参数问题

场景重现:

项目或模块:某大型项目中的OA系统模块
需求:在公文管理的页面,选择上传文件时,增加一个选项,选择上传哪种类型的公文(比如有三种选择:“原版文件”,“正式文件”,“PDF版式文件”,分别可简称为“原文”,“正文”,“版式”),选定后作为一个参数传给文件上传组件Puploader,这样来确定上传的文件属于哪种公文,要求效果是这样的(下图记为图1):
使用Puploader组件上传文件时的multipart_params参数问题(详细)_第1张图片
分析:首先描述一下原来的代码逻辑:
1.在此页面加载前,在$(function(){})中把Puploader创建并初始化,绑定事件(上传中,上传后的动作),等待调用,附上伪代码:

$(function(){
	 var uploader = new plupload.Uploader({
		 file_data_name: 'files',
	 	 multipart_params:{XXXX:XXXXX,XXXXX:XXXXXX},//JSON格式的参数列表,键值对数量不限。这里就是这篇文章所述问题的关键。
		 browse_button : 'uploadbtn(图一的添加按钮的id)', 
		 url : 'com.mln.wateroa.files.oaMainFileUpload.flow', 
		 flash_swf_url : 'Moxie.swf路径(比如<%= request.getContextPath() %>/....../Moxie.swf)', //swf文件,当需要使用swf方式进行上传时需要配置该参数
		 silverlight_xap_url : 'Moxie.xap路径(比如<%= request.getContextPath() %>/....../Moxie.xap)' //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
	 });    
		
	 //在实例对象上调用init()方法进行初始化
	 uploader.init();
		
	 //绑定各种事件,并在事件监听函数中做你想做的事
	 uploader.bind('FilesAdded',function(uploader,files){
		 loading = nui.loading("请等待,文件上传中...","提示");
		 uploader.start();
	 });
	 uploader.bind('UploadProgress',function(uploader,file){	        
	 });
	 uploader.bind("UploadComplete",function(uploader,file){
		  nui.hideMessageBox(loading);
		  //在这一行执行本页面的重新加载(reload一下),可看到上传后的文件被列出来。
	 });
});

2.点击添加时,弹出选择文件的对话框,选择要上传的文件。
3.选择文件后“确定”,即开始上传,据我们这里的设定,在上传结束后重新加载一下这个正文管理页面。

遇到的问题

问题就出在这个multipart_params参数,它在图一窗口加载之前就被赋值了,但是“添加”按钮右边三选一的文件类型的字面值还需要写到这组参数里面使用的,这可怎么办?

简单描述一下尝试

起初不是很了解这个组件,尝试把声明与初始化放在一个function里边通过点击按钮触发(即onclick),但是意外发现这样处理的话会导致:
第一次点击“添加”后页面无响应,再点一次出现文件选择窗口,关闭窗口再点一次添加,文件选择窗口会连续出现两次,规律就是第n次点击添加,文件选择窗口就出现(n-1)次,百度之后了解到这是因为这个组件每被初始化一次,就会新建一个input type=file,并且不关闭图一那个窗口这些input就不会自行结束生命周期,导致越来越多,点一次多一个。

我的解决方法

后来转变了一下思路:增加一级子页面,把图一的“添加”按钮右边的字面值传递到新的子页面,作为参数在Puploader组件声明时传到multipart_params里去。这样即可解决这个冲突。重点:Puploader组件声明时机仍然是页面加载前,只不过改为放在选文件类型后的下一级页面,这样传参可以按自己需要,组件声明也只需一次,不会再乱弹出文件选择窗口了。
附上我新建的第三级页面截图:
使用Puploader组件上传文件时的multipart_params参数问题(详细)_第2张图片

声明

希望能与各位一起进步,同时此文也作为我的技术积累,收录于此。
如需转载,请注明出处。

你可能感兴趣的:(JS)