问题描述
产品要适配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页面的情况下就可以传递动态参数了。
注意:如果同一个页面有多个上传按钮,则需要留意参数名不能重复,否则可能导致赋值错乱。
总结
该方法在我们产品下测试有效,记录一下以供参考,如果有更好的方法欢迎讨论。