最近帮同事排查一个问题,大约是这样:
有一个通用的文件上传ASCX控件,同时支持Flash和无刷新上传,在检测到浏览器不支持Flash的时候,自动使用无刷新上传上传文件。之前使用一直没问题,后来因为项目的需求,需要同时上传多组文件,当时使用的是通过iframe来加入另一个控件,避免相互之间的冲突。但后来发现,在浏览器不支持Flash的时候,上传的文件,全部显示到最后一个上传控件中去了。
经过仔细检查,无刷新上传,使用的是传统的Form表单,通过指定target实现的,在页面加载完成后,自动添加iframe,如下:
$("body").append("<iframe id='frameFile' name='frameFile' src='about:blank' style='display: none;'></iframe>");
在上传的时候:
form.attr({ "target": "frameFile", "enctype": "multipart/form-data", "action": getUploadUrl() });
form.submit();
这里修改了form的target,让它指向到刚才创建的iframe,这样提交后,用户看不到页面的加载和刷新,从而实现了无刷新上传。
而由于网页上有多个上传控件,这样会存在多个name='frameFile'的iframe,而post的时候,都查找到最后一个,这样就出现了前面所述的问题。找到问题后,解决就比较简单了,只要控制每个控件实例的frameFile的name不同即可,类似如下:
var iframeName = "frameFile" + new Date().getTime();//随机生成一个名称
$("body").append("<iframe id='"+ iframeName +"' name='"+ iframeName +"' src='about:blank' style='display: none;'></iframe>");
form.attr({ "target": "+ iframeName +", "enctype": "multipart/form-data", "action": getUploadUrl() });
form.submit();
如此,问题解决。