解决IE8下layui上传文件时获取不到动态参数的问题，不更换上传组件不修改HTML页面

---

问题描述

产品要适配IE8，使用layui作为前端框架，上传文件使用layui-upload组件。上传文件时要携带额外的动态参数，在IE8下测试时发现，文件可以上传，但动态参数无法获取到。

---

问题定位

起初代码如下，在before事件中获取参数，给data属性赋值。

var uploadObject = upload.render({
	......
	,auto: false
    ,before: function(obj){
           this.data = {
           		args1: $('#args1').val(),
           		args2: $('#args2').val()
           }
    	layer.load();
     }
	......        
});		

但是在IE8下，这种方式在页面初始加载的时候就获取了参数，而此时的表单并没有填写也就导致参数为空。
因IE8不支持FormData，layui构造了一个隐藏的表单用来上传文件并传递参数，而在这种方式下给后台的的参数其实是从这个隐藏的表单获取的，所以就算给uploadObject 的data对象赋值，但后台还是收不到参数。如下图所示：

解决方案

根据上一步的问题定位，只要给这个隐藏表单赋值就可以了。修改方案如下：
首先，给隐藏表单增加默认参数，修改后的render如下。

var uploadObject = upload.render({
	elem: '#pfxChoose'
	,url: '' //改成您自己的上传接口
	,auto: false//设置成不自动上传
	,accept: 'file' 
	,exts: 'pfx|PFX' 
    ,data:{//重点,增加空的默认参数
    	args1:'',
    	args2:''
    }
	,before: function(obj){	
	}
	,done: function (res) {
	}
	,error: function(){	
	}
});

因为data属性默认增加了参数，所以隐藏表单也增加了参数，如下：

其次，在上传之前给隐藏表单赋值，代码如下：

$('#uploadButtonID').click(function(){//点击上传按钮后赋值
			
	//参数赋值，其他支持FormData的浏览器，继续使用给data属性赋值的方式传递参数
	uploadObject .config.data={
			alias: $('#uploadPfxForm #alias').val(),
			password: $('#password').val()
	}
	//我们产品使用的layui版本为2.4.3,在layui 2.5.0以后可以使用reload()重载upload实例
	
	//适配ie8下上传不传参数的问题，layui构造的隐藏表单域就在选择文件的按钮域的后面
	$('.layui-upload-form input[name=args1]').val($('#args1').val());
	$('.layui-upload-form input[name=args2]').val($('#args1').val());
	
	uploadObject .upload();//上传
			
});

以上，在不用修改html页面的情况下就可以传递动态参数了。
注意：如果同一个页面有多个上传按钮，则需要留意参数名不能重复，否则可能导致赋值错乱。

总结

该方法在我们产品下测试有效，记录一下以供参考，如果有更好的方法欢迎讨论。