使用iframe进行表单提交不使用ajax，并且避免了页面的刷新。如果页面中提交图片，并在当前页面显示，一般我们使用iframe实现。
一般地，实现代码如下：
|
1 2 3 4 5 6 7 8 |
<div id="ifrm"><font size="1"> <iframe id="uploadframe" name="uploadframe" frameborder="0" style="diplay:none"></iframe> </div> <form id="uploadform" action="uploader.php" method="post" enctype="multipart/form-data" target="uploadframe" onsubmit="uploading(this); return false"> <input type="file" name="file_up[]" /> <input type="text" name="name" /> <input type="submit" value="UPLOAD" id="sub" /> </form> |
form表单中target就是iframe的名称。这样，在点击提交按钮后，会交由uploader.php处理，并把处理结果显示到名为upload frame的iframe中。
上面的表单共定义了两个字段，一个文本，一个是文件提交。但是在实际测试中，在firefox中正常，在chrome中无效，通过跟踪，发现表单内容根本就没有提交到后台。
解决方法
参考了http://stackoverflow.com/questions/6755556/cross-domain-form-posting-with-iframe-target-in-chrome， 发现只有改变下提交方法就可以。
把
|
1 |
<input type="submit" value="UPLOAD" id="sub" /> |
这里改成
|
1 |
<input type="button" value="UPLOAD" id="sub" onclick="doSub()”/> |
并且，定义了doSub函数：
|
1 2 3 |
function doSub() { document.getElementById('uploadform').submit(); } |
就可以了。