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表单上传文件获取后台传来的数据

  • 相关阅读:
    LeetCode 83. Remove Duplicates from Sorted List (从有序链表中去除重复项)
    LeetCode 21. Merge Two Sorted Lists (合并两个有序链表)
    LeetCode 720. Longest Word in Dictionary (字典里最长的单词)
    LeetCode 690. Employee Importance (职员的重要值)
    LeetCode 645. Set Mismatch (集合不匹配)
    LeetCode 500. Keyboard Row (键盘行)
    LeetCode 463. Island Perimeter (岛的周长)
    115.Distinct Subsequences
    55.Jump Game
    124.Binary Tree Maximum Path Sum
  • 原文地址:https://www.cnblogs.com/goloving/p/7656117.html
Copyright © 2011-2022 走看看