from表单实现无跳转上传文件,接收页面后台数据
实现无跳转发送表单数据、文件,并能接收后台返回的数据。
主要技术要点:
1、form表单添加target属性,指定一个iframme的name;form表单提交后在iframe内嵌窗口接受响应,主页面就不会再跳转。
2、同时,我们需要接收知道后台返回的数据以便我们的业务处理,这里让后台返回一个带有执行一个函数的script标签。
(target属性值:当target指定的name不存在时,那么会新开一个window.name为该name值的窗口。之后的每次提交都会到这个窗口来,如果关闭了此窗口,那么再次提交时还是会新开启窗口的。)
<body>
<center>
<div>
<form id="addForm" class="form" method="post" enctype="multipart/form-data" target="xmlfile_iframe" style="padding:5% 0% 5% 12%;">
<table id="itemTable" class="form">
<tr>
<td class="formTitle" ><s:text name="cems.dataImport"></s:text><font face="宋体">*</font></td>
<td class="formValue" ><input type="text" name="txt" readonly class="form-control"/></td>
<td><input type="button" value='<s:text name="cems.chooseFile"></s:text>' size="" onclick="upload_xmlfile.click()" style="width: 73px;" class="btn btn-primary" />
<input type="file" id="upload_xmlfile" onchange="txt.value=this.value" name="xmlfile" style="position:absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;margin-left:-286px; height: 25px;"size="" />
</td>
</tr>
</table>
</form>
</div>
<div class="windowButtonDiv" style="padding-top:30px;">
<button class="btn btn-primary" id="submitButton"><span><i class="fa fa-check"></i></span><span><s:text name="cems.ok"></s:text></span></button>
<button class="btn btn-primary" id="closeWindow" onclick="dialogClose()"><span><i class="fa fa-close"></i></span> <span><s:text name="cems.cancel"></s:text></span></button>
</div>
<div class="alert alert-warning" style="text-align: center;margin-top:20px"><i class="fa fa-info"> 注意:请选择XML文件</i></div>
</center>
<iframe name="xmlfile_iframe" style="display: none"></iframe>
</body>
<script type="text/javascript">
$(function(){
$("#submitButton").bind("click",function(){
if($("#addForm").Validform()){
var index = $("#upload_xmlfile").val().lastIndexOf(".")+;
var ext = $("#upload_xmlfile").val().substr(index).toUpperCase();//获得文件后缀名
//文件格式过滤,仅支持xml格式
if(ext=='XML'){
$("#addForm").attr("action","${basePath}/soft/kvsSoftAction_importDo.do");
$("#addForm").submit();
$(this).attr("disabled","disabled");
Loading(true);
}else{
dialogMsg('<s:text name="cems.soft.xmlfileTypeError"></s:text>',);
}
}
});
});
function setMessage(data){
Loading(false);
if(data === "success"){
dialogMsg("导入成功!",);
dialogClose();
}else{
dialogMsg("导入失败",-);
}
}
</script>
/**
* 数据导入
*/
public void importDo(){
log.info(" 数据导入-ST");
this.msg=RESULT_FAIL;
KvsSoft tempKvsSoft=null;
//List<String> failedFailName = new ArrayList<String>();
String subFilename = "";
try {
NormalUploadFileParser normalUploadFileParser = new NormalUploadFileParser();
List<FileInfoHolder> fileInfoHolder=normalUploadFileParser.parseRequest(getRequest());
InputStream inputStream =fileInfoHolder.get().getInputStream();
String nameAll = fileInfoHolder.get().getFileName();
subFilename = nameAll.substring(nameAll.lastIndexOf("\\")+, nameAll.length());
KvsSoftParse kvs=new KvsSoftParse();
List<KvsSoft> list =kvs.xmlToObject(inputStream);
for (KvsSoft kvsSoft : list) {
//先从数据库查询,如果有则更新,没有则插入
tempKvsSoft =kvsSoftService.queryById(kvsSoft.getId());
if(tempKvsSoft==null){
//failedFailName.add(tempKvsSoft.getName());
kvsSoftService.save(kvsSoft);
}else{
tempKvsSoft.setName(kvsSoft.getName());
tempKvsSoft.setType(kvsSoft.getType());
tempKvsSoft.setCompany(kvsSoft.getCompany());
tempKvsSoft.setFlag(kvsSoft.getFlag());
tempKvsSoft.setDesInfo(kvsSoft.getDesInfo());
tempKvsSoft.setUrl(kvsSoft.getUrl());
tempKvsSoft.setPublishTime(kvsSoft.getPublishTime());
tempKvsSoft.setVersion(kvsSoft.getVersion());
tempKvsSoft.setInstallPath(kvsSoft.getInstallPath());
tempKvsSoft.setEngineVer(kvsSoft.getEngineVer());
tempKvsSoft.setVirusBaseVer(kvsSoft.getVirusBaseVer());
tempKvsSoft.setSoftVersion(kvsSoft.getSoftVersion());
tempKvsSoft.setSoftEngineVer(kvsSoft.getSoftEngineVer());
tempKvsSoft.setSoftVirusBaseVer(kvsSoft.getSoftVirusBaseVer()); //failedFailName.add(tempKvsSoft.getName());
kvsSoftService.update(tempKvsSoft);
}
}
this.msg=RESULT_SUCCESS;
log.info(" 数据导入成功!");
inputStream.close();
} catch (Exception e) {
log.error("批量导入出错", e);
}finally{
managerOperaterLogService.save("cems_operatekvsSoftImport" ,new String[]{subFilename} );
StringBuilder sb =new StringBuilder();
sb.append("<script type='text/javascript'>");
sb.append("window.parent.setMessage('"+this.msg+"')");
sb.append("</script>");
print(sb.toString());
log.info(" 记录操作到日志表-END-返回数据"+sb.toString());
}
}
在提交上传文件之前:<script type="text/javascript">window.parent.setMessage('success')</script>,是不会有的。
其中window.parent就表示隐藏的iframe的父级,在父级里面去调用setMessage函数。当然你这个setMessage函数得在父级区域有定义,否则会报:window.parent.setMessage is not a function 的错误。
主要是后台传值得传一个这样的数据来:res.send('<script>window.parent.uploadSuccess('+data+')</script>');
StringBuilder sb =new StringBuilder();
sb.append("<script type='text/javascript'>");
sb.append("window.parent.setMessage('"+this.msg+"')");
sb.append("</script>");
print(sb.toString());
还有一种方法:利用jquery-form的ajaxForm方法也可以获取到后台传的数据。
参考之前写的这篇博客:通过form表单上传文件获取后台传来的数据
from表单实现无跳转上传文件,接收页面后台数据的更多相关文章
- from表单实现无跳转上传文件,接收页面后台数据。
本文基于我刚写的http://www.cnblogs.com/iwang5566/p/6287529.html进行了简单的扩展,实现页面无跳转表单数据提交,并接收后台返回的数据. 下载好,上一篇文章d ...
- c# 模拟表单提交,post form 上传文件、大数据内容
表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipart/form-data,而且要设定一个 boundary 参数,这个参数是由应用程序自行产生,它会用来识别每 ...
- c# 模拟表单提交,post form 上传文件、数据内容
转自:https://www.cnblogs.com/DoNetCShap/p/10696277.html 表单提交协议规定:要先将 HTTP 要求的 Content-Type 设为 multipar ...
- 使用django表单,使网页添加上传文件,并分析文件。
开发环境是: apache + python + django+ eclipse(开发环境) 欲达到目的: 在网页上,添加上传文件控件.然后读取csv文件,并分析csv文件. 操作步骤: django ...
- 摒弃FORM表单上传图片,异步批量上传照片
之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- app端上传文件至服务器后台,web端上传文件存储到服务器
1.android前端发送服务器请求 在spring-mvc.xml 将过滤屏蔽(如果不屏蔽 ,文件流为空) <!-- <bean id="multipartResolver&q ...
- jQuery 关于IE9上传文件无法进入后台问题的原因及解决办法(ajaxfileupload.js第四弹)
第四弹的诞生完全不在自己最初的计划之中,是有个网友看了先前关于<ajaxfileupload.js系列>的文章后提出的问题,由于自己一直是用chrome浏览器去测试demo,完全忽略IE浏 ...
- spring mvc + ajax上传文件,页面局部刷新
1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...
随机推荐
- 机器学习方法:回归(三):最小角回归Least Angle Regression(LARS),forward stagewise selection
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 希望与志同道合的朋友一起交流,我刚刚设立了了一个技术交流QQ群:433250724,欢迎对算法.技术.应用感 ...
- Linux 基础——处理文件与目录的命令
继续第三天学习,每天下班后积累一点点,始终相信厚积薄发. 一.处理文件的命令 touch dest_file:在当前目录下创建指定的文件. cp source dest:将指定的猿文件复制到目标文件, ...
- Python数据库访问公共组件及模拟Http请求
前言 最近一段时间除了忙于工作之外,在业余时,迷上了python,对它的跨平台深深的吸引.经过一段时间的自我学习,了解了其基本的语法,便开始自己着手摆弄起来.主要想把以前对接的接口再实现一次,以便于在 ...
- 基于注解的Spring多数据源配置和使用(非事务)
原文:基于注解的Spring多数据源配置和使用 1.创建DynamicDataSource类,继承AbstractRoutingDataSource package com.rps.dataSourc ...
- python模块安装路径
Unix(Linux): prefix/lib/pythonX.Y/site-packages 默认路径:/usr/local/lib/pythonX.Y/site-packages 另外,在Unix ...
- LeetCode 461 汉明距离/LintCode 365 统计二进制中1的个数
LeetCode 461. 汉明距离 or LintCode 365. 二进制中有多少个1 题目一:LeetCode 461. 汉明距离 LeetCode 461.明距离(Hamming Distan ...
- 4.Spark Streaming事务处理
首先,我们必须知道什么是事务及其一致性? 事务应该具有4个属性:原子性.一致性.隔离性.持久性.这四个属性通常称为ACID特性. 原子性(atomicity).一个事务是一个不可分割的工作单位,事务中 ...
- Codeforces gym102058 J. Rising Sun-简单的计算几何+二分 (2018-2019 XIX Open Cup, Grand Prix of Korea (Division 2))
J. Rising Sun time limit per test 1.0 s memory limit per test 1024 MB input standard input output st ...
- 用jquery实现文章自动生成二级目录(续)
前文:用jquery实现文章自动生成二级目录. 使用方法的补充 我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们. 发现的一些问题 在我把我的js放到自己的博客园上运行之后发 ...
- matlab学习之降噪平滑算法
平滑降噪测试,代码如下 % 平滑降噪 % FFT变换和小波变换 clc clf clear length_of_sig=128; x=linspace(0,2*pi,length_of_sig); % ...