实现无跳转发送表单数据、文件,并能接收后台返回的数据。 主要技术要点: 1、form表单添加target属性,指定一个iframme的name;form表单提交后在iframe内嵌窗口接受响应,主页面就不会再跳转。 2、同时,我们需要接收知道后台返回的数据以便我们的业务处理,这里让后台返回一个带有执行一个函数的script标签。
<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="30" 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="30" /> ????????????</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(".")+1; ????????????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>‘,0); ???????????} ???????} ???});});function setMessage(data){ ???Loading(false); ???if(data === "success"){ ???????dialogMsg("导入成功!",1); ???????dialogClose(); ???}else{ ???????dialogMsg("导入失败",-1); ???}}</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(0).getInputStream(); ???????String nameAll = fileInfoHolder.get(0).getFileName(); ???????subFilename = nameAll.substring(nameAll.lastIndexOf("\\")+1, 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表单实现无跳转上传文件,接收页面后台数据
原文地址:http://www.cnblogs.com/goloving/p/7656117.html