使用iframe标签结合springMvc做文件上传

时间:2023-03-09 13:13:07
使用iframe标签结合springMvc做文件上传

1.iframe.jsp

<body>
       <h1>测试iframe文件上传</h1>
       <!--
           1.要求表单的target属性名称与iframe的name名字一致
           2.iframe自身特性
               1).iframe标签所在的页面称之parent(父)页面
               2).iframe标签所包含的页面称之为子页面
           3.本测试的子页面是:controller跳转的页面,即是ok.jsp
        -->
       <iframe name="aaa" width="743px" height="500px;"></iframe>
       <form action="/upload/upload1" target="aaa" method="post" enctype="multipart/form-data">
           <input type="file" name="aa" />
           上传文件路径:<input type="text" name="photo" readonly="readonly"  />
           <script type="text/javascript">
               function test(path){
                   document.getElementsByName("photo")[0].value=path;
               }
           </script>
           <input type="submit" value="提交" />
       </form>
  </body>

2.controller

/**
     * 上传到web项目的upload文件夹中,首先要在项目中建立一个upload文件夹
     * @param aa
     * @param request
     * @return
     */
    @RequestMapping("/upload1")
    public String  upload1(MultipartFile aa,HttpServletRequest request){
        System.out.println(aa.getOriginalFilename());
        try {
            //文件上传的路径
            String realPath = request.getSession().getServletContext().getRealPath("/upload");
            aa.transferTo(new File(realPath,aa.getOriginalFilename()));
            //为测试iframe做准备
            request.setAttribute("path", "upload/"+aa.getOriginalFilename());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "back/ok";
    }

ok.jsp:子网页

<body>
       <img alt="" src="/upload/test.png">
       <script type="text/javascript">
           //在子网页中调用父网页中的函数
           parent.test("/${path}");
       </script>
  </body>

3.效果图

选择需要上传的文件

使用iframe标签结合springMvc做文件上传