有关文件上传 非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 相关文章推荐
js获取客户端外网ip的简单实例
Nov 21 Javascript
javascript实现日期格式转换
Dec 16 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
javascript cookie的简单应用
Feb 24 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
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
Linux下编译redis和phpredis的方法
2016/04/07 PHP
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python装饰器用法示例小结
2018/02/11 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Django分组聚合查询实例分享
2020/04/29 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
python调用摄像头的示例代码
2020/09/28 Python
员工拾金不昧表扬信
2014/01/09 职场文书
在校实习生求职信
2014/06/18 职场文书
运动会入场词
2015/07/18 职场文书
MySQL基础(二)
2021/04/05 MySQL
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL