spring mvc 文件上传特殊配置及操作

刺骨的言语ヽ痛彻心扉 2022-03-17 02:08 132阅读 0赞

文件上传

1) pom.xml添加依赖

  1. <dependency>
  2.     <groupId>commons-fileupload</groupId>
  3.     <artifactId>commons-fileupload</artifactId>
  4.     <version>1.3.3</version>
  5. </dependency>

2) springmvc.xml 中对上传文件表单做特殊配置

上传文件表单配置

multipartResovler 上传文件表单的解析器

  1. <!-- 配置上传文件表单解析器, id 是固定的 -->
  2. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  4. </bean>

3) 编辑表单页面

  1. <!-- multipart/form-data 表示表单数据由多部分，属于复杂的表单格式 -->
  2. <form action="请求地址" method="post" enctype="multipart/form-data">
  3.     <!-- 文件选择框 -->
  4.     <input type="file" name="请求参数名">
  5. </form>

4) 编写控制器

  1. @Controller
  2. public class UploadController {
  4.     @RequestMapping("/upload")
  5.     public String upload(String username,
  6.                          Integer age,
  7.                          MultipartFile image) throws IOException {
  8.         System.out.println("上传文件的原始名称：" + image.getOriginalFilename());
  9.         System.out.println("上传文件的类型：" + image.getContentType());
  10.         System.out.println("获取上传文件大小：" + image.getSize());
  12.         // 生成了临时文件, 当请求结束, 此临时文件会被删除
  13.         // 把临时文件另存为： file
  14.         image.transferTo(new File("d:\\" + image.getOriginalFilename()));
  15.         return "hello";
  16.     }
  17. }

5) 图片预览

通过js完成

  1. <input type="file" name="image" id="image" onchange="preview()">
  3. <img src="" id="preview"/>
  5. function preview() {
  6.     // 获取图片选择框中图片的二进制信息
  7.     var image = document.getElementById("image");
  8.     var file = image.files[0]; // 拿到数组中第一个图片文件
  10.     // 读取文件内容
  11.     var reader = new FileReader();
  12.     // 定义事件
  13.     reader.onload = function() {
  14.         // 获取结果
  15.         document.getElementById("preview").src = this.result;
  16.     };
  17.     // 开始读取
  18.     reader.readAsDataURL(file);
  19. }

6) 对上传文件的控制

从客户端的角度限制 accept 表示可以接受的类型，也就是图片的类型

服务器端要对上传文件做检查
图片,修改大小 800x600 -> 640x480 成功
假图片,修改大小 800x600 -> 640x480 报异常

文件大小限制

  1. <!-- 配置上传文件表单解析器, id 是固定的 -->
  2. <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  3.     <!-- 限制上传文件的总大小,单位是字节-->
  4.     <property name="maxUploadSize" value="2000"></property>
  5. </bean>

7) springmvc 对静态文件的处理(图片,html,js,css)

springmvc 默认把所有路径都当做了 控制器 的路径

文件上传的例子

upload.jsp页面，提交图片的页面

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>Title</title>
  5. </head>
  6. <body>
  7. <!-- multipart/form-data 表示表单数据由多部分，属于复杂的表单格式 -->
  8. <form action="/upload" method="post" enctype="multipart/form-data">
  9.     <!-- 文件选择框 -->
  10.     <input type="file" name="image" id="image" onchange="preview()" accept=".jpg,.png,.bmp">
  11.     <input type="submit" value="提交">
  12. </form>
  13. <img src="" id="preview"/>
  14. <script>
  15.     //这事件是为了显示图片在页面上
  16.     function preview() {
  17.         // 获取图片选择框中图片的二进制信息
  18.         var image = document.getElementById("image");
  19.         var file = image.files[0]; // 拿到数组中第一个图片文件
  21.         // 读取文件内容
  22.         var reader = new FileReader();
  23.         // 定义事件
  24.         reader.onload = function() {
  25.             // 获取结果
  26.             document.getElementById("preview").src = this.result;
  27.         };
  28.         // 开始读取
  29.         reader.readAsDataURL(file);
  30.     }
  31. </script>
  32. </body>
  33. </html>

文件处理类

  1. import org.springframework.stereotype.Controller;
  2. import org.springframework.web.bind.annotation.RequestMapping;
  3. import org.springframework.web.multipart.MultipartFile;
  5. import java.io.File;
  6. import java.io.IOException;
  8. @Controller
  9. public class UploadController {
  11.     @RequestMapping("/upload")
  12.     public String upload( MultipartFile image) throws IOException {
  13.         //获取文件名
  14.         System.out.println("上传文件的原始名称：" + image.getOriginalFilename());
  15.         //获取文件类型
  16.         System.out.println("上传文件的类型：" + image.getContentType());
  17.         //获取文件大小
  18.         System.out.println("获取上传文件大小：" + image.getSize());
  20.         // 生成了临时文件, 当请求结束, 此临时文件会被删除
  21.         // 把临时文件另存为： file，这样可以变成在需要的目录下
  22.         image.transferTo(new File("d:\\" + image.getOriginalFilename()));
  23.         //请求重定向
  24.         return "redirect:/upload.jsp";
  25.     }
  26. }

结果

upload.jsp页面

点击选择文件按钮，会弹出以下对话框：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dyZXlfbW91c2U_size_16_color_FFFFFF_t_70

选择完图片后，页面显示选择的图片 ，如下图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dyZXlfbW91c2U_size_16_color_FFFFFF_t_70 1

d盘里保存了该图片

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dyZXlfbW91c2U_size_16_color_FFFFFF_t_70 2

控制台上输出

  1. 上传文件的原始名称：2_1.bmp
  2. 上传文件的类型：image/bmp
  3. 获取上传文件大小：172854

发表评论

表情：
评论列表 （有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读