html使用iframe实现伪异步表单，实现无刷新上传文件时遇到的问题

淩亂°似流年 2022-07-21 01:47 86阅读 0赞

最近发现原有老系统框架只支持对单表单（单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>

<title>无刷新提交表单</title>

<!--

function callback(str)\{

alert(str);

// --></script>

</head>

<body>

</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））即可。

这样就解决了上述问题。

收藏于 2013-11-26