利用iframe上传文件,多次上传打开新窗口
2017-01-01 15:23

    对于页面中的交互,现在很多都是采用ajax实现异步交互达到局部刷新的效果。

    但是我们所熟知的ajax交互只能像后台传送字符串信息,对于文件的上传却无能为力。

    那么对于文件上传我们还是要采用隐藏iframe的方法实现,或者用flash实现。

    (当然在大部分的现代浏览器中运用ajax2提供的FormData这个新接口的功能可以实现真正的异步上传文件,鉴于IE浏览器还占据很大的市场份额,这种新特性目前也只能用于内部系统中)

    对于目前的状况如果不用flash,我们就只能采用隐藏iframe的方式实现文件的上传。

<iframe style='display:none;' id='hidiframe' name='hidiframe'></iframe>
<form enctype="multipart/form-data" action="uploadFiles.do" method="post" target="hidiframe">
    <input type='text' name='filename' placeholder='请输入文件名称'/>
    <input type='file' name='ufile' />
    <input type='submit' value='上传文件'/>
</form>

这样的话我们在提交form表单的时候就不会出现页面跳转的情况,因为form表单的返回页面到了display:none的iframe里面。

一般情况下我们要在上传完成后给用户一个提示,那么就需要用子页面调用父页面里面的方法。

在父页面我们写一个方法

function upfilecall(){
    alert("文件上传成功!");
}

然后上传成功返回的子页面里面

parent.upfilecall();

这样在上传文件成功后我们就能得到一个alert的提示。

这种用iframe上传文件的方法是简单高效的。但是他在特定情况下存在一个问题

至于是什么原因导致的没有研究明白,我两个项目同样的写法,一个可以重复提交,一个不可以重复提交。但是下面的处理办法是解决重复提交问题的有效方法

这个问题就是如果我们在上传成功一个文件之后,继续再上传文件那么第二次上传的时候,返回的页面不会进入到我们预想的iframe中,而是跳转到了新的窗口打开了。处理方法就是在form表单提交时修改iframe。

$("#miframe")[0].contentWindow.name="hidiframe";

加上这一句代码后,多次提交也不会出现跳转到新窗口的情况了,如果加上这句话,还不起作用,那么就把form的onsubmit事件去掉就OK了。

大部分造成这种情况的是因为有onsubmit事件。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(3913)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1