有关文件上传 非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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
不错的JS中变量相关的细节分析
Aug 13 Javascript
javascript各种复制代码收集
Sep 20 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
Oct 31 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
优秀教师事迹简介
2014/02/02 职场文书
青年文明号口号
2014/06/17 职场文书
感恩教育月活动总结
2014/07/07 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
小学生作文评语集锦
2014/12/25 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
何玥事迹观后感
2015/06/16 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers