有关文件上传 非ajax提交 得到后台数据问题


Posted in Javascript onOctober 12, 2016

下文给大家介绍文件上传非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="mutipart/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,也就是说提交成功返回的数据写在了name为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提交 得到后台数据问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
js中new一个对象的过程
Feb 20 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
jquery动态创建div与input的实例代码
Oct 12 #Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 #Javascript
jquery动态添加文本并获取值的方法
Oct 12 #Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 #Javascript
微信小程序 生命周期详解
Oct 12 #Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 #Javascript
Angularjs手动解析表达式($parse)
Oct 12 #Javascript
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
php中的ini配置原理详解
2014/10/14 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
Python 自动补全(vim)
2014/11/30 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
用python绘制樱花树
2020/10/09 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
班主任工作经验材料
2014/02/02 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
师德师风个人反思
2014/04/28 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
天坛导游词
2015/02/02 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
教师个人总结范文
2015/02/11 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
vue特效之翻牌动画
2022/04/20 Vue.js