不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

多个无刷新上传引起的问题

最近帮同事排查一个问题,大约是这样:

有一个通用的文件上传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();

 

如此,问题解决。

 

不允许评论
粤ICP备17049187号-1