本文介绍在不使用Ajax的情况下实现文件上传的方法。通过设置表单enctype为multipart/form-data，利用隐藏的iframe作为提交目标，可在表单提交后通过加载iframe内容获取后台返回的JSON数据，从而完成文件上传及结果处理。
非Ajax文件上传与数据获取方案
本文将介绍一种不使用Ajax进行文件上传，并能成功获取后台返回数据的操作方法。
<form name="configForm" id="configForm" method="post" action="" >
..........
</form>通常我们根据ID获取表单数据，通过Ajax发送请求，接收后台返回的数据并进行处理，这种方式非常便捷。
然而，当涉及文件上传时，
<tr>
<td class="fontSize">请选择文件:</td>
<td><input type="" class="easyui-filebox" id="fileImport" name="file" value="" style="width:300px;"></td>
</tr>常规方式无法获取后台返回的数据，表单中的file字段也会显示为null。此时需要
<form name="configForm" id="configForm" method="post" action="" enctype="multipart/form-data" >在表单中添加属性enctype="multipart/form-data"，这样后台才能正常
@RequestMapping("/saveAppVersion")
@ResponseBody
public ModelMap saveAppVersion(String action, TbdAppVersion tbdAppVersion,
@RequestParam(value = "file") MultipartFile file) {....
}接收文件数据。
但必须使用表单提交请求数据，Ajax无法直接实现（具体原因可查阅相关资料）。
<form name="configForm" id="configForm" method="post" action="/admin/systemConfig/saveAppVersion.do" enctype="multipart/form-data">
......
</form>在EasyUI框架中，可以使用js的submit方法进行提交。
handler : function() {
$("#configForm").submit();
}那么问题来了，提交完成后如何获取后台返回的数据呢？
<form name="configForm" id="configForm" method="post" action="/admin/systemConfig/saveAppVersion.do"
enctype="multipart/form-data" target="myIframe"> 。。。。。 </form>
<iframe name="myIframe" id="if_json" style="display:none">
</iframe>可以在表单中添加一个target属性，即将提交成功返回的数据写入名为myIframe的iframe中。这种方式只刷新该iframe，接下来就是获取这个数据了。
虽然网络搜索有时不够精准，但仍能找到一些有用的方法，例如以下获取iframe数据的方法。
handler : function() {
$("#configForm").submit();
$("#if_json").load(function(){//获取iframe中的内容
var body = $(window.frames['myIframe'].document.body);
var data = eval('(' + body[0].textContent + ')');
if(data.resultCode && data.resultCode != 0){
.........
}else{
.........
}
});
}以上所述是小编给大家介绍的有关文件上传 非ajax提交 得到后台数据问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！