非Ajax方式实现文件上传并获取后台返回数据

作者:桌面漫游时间:2026-10-30 15:13:52浏览:217

本文介绍在不使用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提交 得到后台数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!

作者最新文章