iframe提交表单其实比ajax要方便一些，当然ajax也有ajax的好处，只是ajax编码处理有时有些麻烦，虽然经过转码是可以解决中文问题，但如果直接使用iframe不存这些问题了,下面来看看。
最近在做一个项目，用到上传图片功能，发现ajax不能enctype=”multipart/form-data” 属性的表单，没办法，只能使用form表单直接提交的方法了，但是form表单直接提交会跳转页面，这样很不友好，也不是项目需求，于是上网搜索了一番，发现可以使用隐藏的iframe来实现。
具体的原理是form表单提交到iframe里面处理，而这个iframe是隐藏的，所以提交表单的时候当前页面没有发生任何变化。
最重要的就是form的target属性指向iframe的name值，这样就实现了提交到隐藏的iframe中，那么返回值应该怎么获取呢？
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btnOK").click(function () {
var frame1 = document.getElementById("frameFile1").contentDocument; //获取到iframe里面的html元素
var frameJson1 = JSON.parse($(frame1).find(‘pre‘).html());
console.log(frameJson1);
});
});
</script>
</head>
<body>
<form method="POST" action="/Home/Upload" enctype="multipart/form-data" target=‘frameFile1‘ id="form1">
<input type="file" name="file" id="myphoto">
<input type="submit" value="提交">
</form>
<iframe name=‘frameFile1‘ id="frameFile1" style=‘display: block;‘></iframe>
<input type="text" name="name" value=" " />
<input type="button" id="btnOK" value="确定" />
</body>
</html>
时间： 2024-08-08 13:53:35