zoukankan      html  css  js  c++  java
  • 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="30" onclick="upload_xmlfile.click()" style=" 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>&nbsp;
          <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>&nbsp;
        </div>
        <div class="alert alert-warning" style="text-align: center;margin-top:20px"><i class="fa fa-info"> &nbsp;注意:请选择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表单上传文件获取后台传来的数据

  • 相关阅读:
    MORMOT数据库连接池
    TOleDBMSSQLConnectionProperties驱动MSSQL数据库
    mORMot访问远程数据库
    mormot 直接使用UNIDAC引擎操作数据库
    mormot 数据集和JSON互相转换
    Go -- 读取文件内容
    nginx -- 启动, 重启, 关闭
    JS -- 一篇文章掌握RequireJS常用知识
    用JS获取地址栏参数的方法(超级简单)
    git -- 忽略某个文件
  • 原文地址:https://www.cnblogs.com/goloving/p/7656117.html
Copyright © 2011-2022 走看看