html使用iframe实现伪异步表单，实现无刷新上传文件时遇到的问题
最近发现原有老系统框架只支持对单表单（单form）的数据进行提交处理，不支持多个表单一起提交处理。于是，我打算改造原有的系统框架，从而支持多表单数据提交处理，其中包含了多表单（多form）的文件上传。
由于最初是一个form，而现在想要提交多份数据，所以自然想到了在form里面使用循环，输出多份div，每份div里面都有同名（name）但不同id的input元素，这样就可以在sever端的action接收到数组结构的提交数据，方便处理。将页面设为mine.jsp。
由于原先是有提交图片这个操作的，图片之前是跟着表单一起提交的，但是现在不行，需要异步提交图片，从而实现多个图片可以各自被预览的功能。
最先的思路是想使用form表单提交，即在form当中嵌套form。后来发现不行，发现每次都是第一个嵌套的form中的提交图片的按钮提交失败，传不上文件。并且仔细检查后发现后面嵌套的form则可以提交。这是一个bug？
由于直接提交form表单是会刷新页面的，我现在不希望刷新页面，我需要异步上传图片文件。所以在网上找了一些插件，来尝试，比如uploadify、jquery.ajax.upload，后来发现都有各种各样的问题，比如syntax error等。
后来得知，html的form是不允许嵌套的，这就是导致第一个嵌套的form中的提交图片的按钮提交失败的原因。
此时我又从网上查到可以html通过使用iframe实现伪异步表单，实现无刷新上传文件。一份简单示例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无刷新提交表单</title>
<script type="text/javascript">
<!--
function callback(str){
alert(str);
}
// --></script>
</head>
<body>
<form name="form1" method="POST" action="你的action"target="post_frame" enctype="multipart/form-data">
<iframe name='post_frame' id="post_frame"style="display:none;"mce_style="display:none;"></iframe>
<input type="file" name="img" />
<input name="power[]" type="text"/>
<input type="submit" value="完成以上修改" name="submit"/>
</form>
</body>
</html>
这里通过提交数据到iframe这个target里面去从而实现了无刷新提交。不过此时form还是嵌套的，所以第一个嵌套的form还是会刷新页面。
我又想到了用iframe来装上面这段代码，这样就不会发生form嵌套了，设为upload.jsp。
尝试后发现所有里层的form都不会刷新主页面了，从而实现了无刷新提交文件。
这里我没有再尝试之前提到的插件，如uploadify、jquery.ajax.upload，所以我无法确定是不是之前是因为form嵌套导致插件出问题。
或许有人会问，iframe提交后，怎么返回数据？
答案很简单，如果你是使用struts2的action，只要在执行完action的方法后跳转到某个页面，比如output.jsp，再在里面获取action返回的数据即可，根据这些数据来控制output.jsp的js代码，通过js去控制父父元素（当前output.jsp的父元素（即upload.jsp）的父元素（即mine.jsp））即可。
这样就解决了上述问题。
3779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
