20221009 Web文件上传和下载

最新推荐文章于 2024-08-26 16:38:21 发布

零号工作者

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量91

点赞数

分类专栏：个人学习笔记文章标签：前端 servlet

本文链接：https://blog.csdn.net/weixin_51876109/article/details/127235115

版权

个人学习笔记专栏收录该内容

49 篇文章 0 订阅

订阅专栏

spring MVC 文件上传
文件下载
- 前端代码（表单方式）
- 后端代码

spring MVC 文件上传

前端代码

form表单方式

<html>
  <head>
    <title>非Ajax上传</title>
  </head>
  <body>
    <h1> 采用非Ajax上传，通过表单来提交</h1>
    <!-- 非ajax情况，大家注意： 1 method post 3 enctype  multipart/form-data -->
   <form method="post" action="uploadImg1/" enctype="multipart/form-data">
       <!-- 文件域 同时支持多文件上传 multiple 多文件 accept="image/jpeg" 支持jpg格式图片,选择图片过滤 ,name="myfile"  记得要和后端参数名一致-->
       请选择: <input type="file" name="myfile" multiple accept="image/jpeg">
       <input type="submit" value="上传">
   </form>
  </body>
</html>

ajax方式

<html>
  <head>
    <title>Ajax上传</title>
<%--      导入在线的jquery库文件--%>
      <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <h1> Ajax上传，通过构造FormData对象，使用Ajax提交.</h1>
       <!-- 文件域 同时支持多文件上传 multiple 多文件 accept="image/jpeg" 支持jpg格式图片,选择图片过滤 ,name="myfile"  记得要和后端参数名一致-->
       请选择: <input type="file" id="myfile" name="myfile" multiple accept="image/jpeg">

<%--    按钮注释掉，备用--%>
<%--       <input type="button" id="upload" value="上传">--%>

  <script>
      $(function(){
          //找事件 ->input type file的对象的change事件
          $("#myfile").change(function (e){
              //构造一个FormData对象
              let formData =new  FormData();
              //得到一个file对象->存储的是选择文件的集合(数组)
              let files = e.target.files;
              //输出看看
              console.log(files);

              //单文件处理
              if(files.length == 0){
                  //单个元素直接取得第一个文件,myfile是key的值,files[0]就是value
                  formData.append("myfile",files[0]);
              }
              else if(files.length >0)
              //多文件处理
              {
                  for (let i = 0; i < files.length; i++) {
                      多个元素依次获取文件,myfile是key的值,files[]就是value
                      formData.append("myfile",files[i]);
                  }

              }

              console.log("formdata: "+formData);

              //ajax请求

                  $.ajax({
                      type: "post",
                      url: "uploadImg2/",
                      data: formData,
                      cache: false,
                      contentType: false,
                      //processData 默认值是true,jquery会序列化数据,false,jquery不处理
                      processData: false,
                  }).success(function (data){
                      alert(data);
                  }).error(function (){
                      alert("上传失败");
                  });
          });

      });

  </script>
  </body>
</html>

后端代码

@Controller
public class UploadCarId {
//表单响应方式
	@PostMapping(value = "images1/")
    public String Upload1(MultipartFile myfile[], HttpServletRequest request){

        System.out.println("uploadImage myfile: "+myfile);
        for (MultipartFile multipartFile : myfile) {
            System.out.println("multipartFile.getOriginalFilename(): "+multipartFile.getOriginalFilename());
            File file = new File(request.getServletContext().getRealPath("/images/")+multipartFile.getOriginalFilename());
            try {
                multipartFile.transferTo(file);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        //这里返回的是ModelAndView对象
        return "success";
    }

//ajax响应方式
    @PostMapping(value = "images2/")
    @ResponseBody
    public String Upload2(MultipartFile myfile[], HttpServletRequest request){

        System.out.println("uploadImage myfile: "+myfile);
        for (MultipartFile multipartFile : myfile) {
            System.out.println("multipartFile.getOriginalFilename(): "+multipartFile.getOriginalFilename());
            File file = new File(request.getServletContext().getRealPath("/images/")+multipartFile.getOriginalFilename());
            try {
                multipartFile.transferTo(file);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        //这里返回的是一个普通字符串
        return "success";
    }
}

文件下载

前端代码（表单方式）

<html>
<body>
<h2>Hello World!</h2>
<form method="post" action="download/" enctype="multipart/form-data">
    <label>pptx文件</label>
    <input name="filename" value="文件名.pptx" hidden="hidden">
    <input type="submit" value="下载">
</form>
</body>
</html>

后端代码

@Controller
public class Controller1 {
    @PostMapping(value="download/")
    public String downloads(HttpServletResponse response , HttpServletRequest request , String filename) throws Exception{
        //要下载的图片地址
        String  path = request.getServletContext().getRealPath("/file");
        String  fileName = filename;

        //1、设置response 响应头
        response.reset(); //设置页面不缓存,清空buffer
        response.setCharacterEncoding("UTF-8"); //字符编码
        response.setContentType("multipart/form-data"); //二进制传输数据
        //设置响应头
        response.setHeader("Content-Disposition",
                "attachment;fileName="+ URLEncoder.encode(fileName, "UTF-8"));

        File file = new File(path,fileName);
        //2、 读取文件--输入流
        InputStream input=new FileInputStream(file);
        //3、 写出文件--输出流
        OutputStream out = response.getOutputStream();

        byte[] buff =new byte[1024];
        int index=0;
        //4、执行 写出操作
        while((index= input.read(buff))!= -1){
            out.write(buff, 0, index);
            out.flush();
        }
        out.close();
        input.close();
        return null;
    }
}