IDEA中Spring MVC實現圖片上傳並顯示

本文轉載自查看原文 2019-07-02 10:58 2113

轉載自：https://blog.csdn.net/weixin_42950079/article/details/88813630

我們都知道web項目需要部署到tomcat服務器中運行

那么，我們又是如何通過tomcat來訪問存放在本地磁盤中的圖片呢？，通過tomcat訪問本地圖片，需要配置虛擬路徑，下面介紹兩種配置虛擬路徑的方式：

1、使用 IDEA 設置虛擬路徑
2、在 Tomcat 中設置虛擬路徑
如果不配置虛擬路徑，我們使用Spring MVC上傳的圖片就無法正常顯示，我在學習使用Spring MVC上傳圖片時就遇到過這樣的問題，圖片上傳成功了，但無法讓圖片在瀏覽器中顯示

第一種：使用 IDEA 設置虛擬路徑

1、先創建一個Spring MVC項目，將項目部署到tomcat中

2、在Output directory目錄下創建 image 文件夾，用來保存上傳的圖片，在編寫文件上傳代碼時，就可以通過request.getServletContext().getRealPath("/image/"); 獲取到該目錄，然后指定圖片上傳到該目錄中

request.getServletContext().getRealPath(""); 方法用於獲取Output directory目錄的路徑

如果指定其它目錄保存上傳的圖片，比如在WEB-INF目錄下創建一個image文件夾來保存上傳的圖片，就不能通過String path=request.getServletContext().getRealPath("/image/"); 方法來獲取該目錄，它是用來獲取Output directory目錄的路徑的

而是通過String path="E:\ideaUI\javaworkspace\springmvcTest\web\WEB-INF\image"; 來指定圖片保存目錄

3、Run → Edit Configurations . . . → Deployment → + → External Source . . .

4、選擇保存上傳圖片的磁盤路徑，並設置虛擬路徑為/img
配置成功后，就可以通過 localhost：8080/img/圖片名稱全稱訪問到圖片

第二種：在 Tomcat 中設置虛擬路徑

1、進入tomcat安裝目錄，找到conf文件夾下的server.xml文件

2、在標簽中添加 <Context path="/img" docBase="E:\ideaUI\javaworkspace\springmvcTest\out\artifacts\springmvcTest_war_exploded\image" reloadable="true"/> 設置虛擬路徑

path="/img" → 是虛擬路徑
docBase=“E:\ideaUI\javaworkspace\springmvcTest\out\artifacts\springmvcTest_war_exploded\image” → 是磁盤中保存圖片的真實目錄

3、Run → Edit Configurations . . . → 勾選 Deploy applications configured in Tomcat instance

配置成功后，就可以通過 localhost：8080/img/圖片名稱全稱訪問到圖片

單個圖片上傳

1上傳文件所需jar包

　　commons-fileupload-1.2.2.jar
　　commons-io-2.4.jar

2配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">

<!--加載spring配置文件applicationContext.xml-->
<context-param>
　　<param-name>contextConfigLocation</param-name>
　　<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>
<listener>
　　<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!--配置Spring MVC的入口 DispatcherServlet, 把所有的請求都提交到該Servlet-->
<servlet>
　　<servlet-name>dispatcher</servlet-name>
　　<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
　　<load-on-startup>1</load-on-startup>
</servlet>
<!-- 配置springmvc的前端控制器，可以配置多個前端控制器來攔截不同的url -->
<servlet-mapping>
　　<servlet-name>dispatcher</servlet-name>
　　<!--將DispatcherServlet請求映射配置為 “/”,則所有的URL請求都會被Spring MVC的DispatcherServlet截獲-->
　　<url-pattern>/</url-pattern>
</servlet-mapping>

在Spring MVC的配置文件dispatcher-servlet.xml中配置multipartResolver文件上傳解析器

<bean id="multipartResolver"
　　class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
　　<!--限制上傳文件的最大字節數,1024個字節為1kB,即上傳的文件不能大於100KB-->
　　<property name="maxUploadSize" value="1024000"/> <!-- 10M -->
　　<!--設置請求的編碼格式為UTF-8,默認為iso-8859-1-->
　　<property name="defaultEncoding" value="UTF-8"/>
</bean>

這是dispatcher-servlet.xml文件的全部代碼

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
　　xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
　　xmlns:context="http://www.springframework.org/schema/context"
　　xmlns:mvc="http://www.springframework.org/schema/mvc"
　　xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">

　　<!--掃描器-->
　　<context:component-scan base-package="com.CD4356.controller"/>

　　<!--配置<mvc:annotation-driven>,否則無法@Controller注解無法被解析-->
　　<mvc:annotation-driven/>

　　<!--viewResolver視圖解析器-->
　　<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
　　　　<property name="prefix" value="/WEB-INF/page/"/>
　　　　<property name="suffix" value=".jsp"/>
　　</bean>

　　<!--multipartResolver文件上傳解析器-->
　　<bean id="multipartResolver"
　　　　class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
　　　　<!--限制上傳文件的最大字節數,1024個字節為1kB,即上傳的文件不能大於100KB-->
　　　　<property name="maxUploadSize" value="1024000"/> <!-- 10M -->
　　　　<!--設置請求的編碼格式為UTF-8,默認為iso-8859-1-->
　　　　<property name="defaultEncoding" value="UTF-8"/>
　　</bean>

</beans>

在WEB-INF下創建page目錄，用來存放jsp、html等文件，在page中創建uploadFile.jsp文件

<form>中method="post" 和 enctype="multipart/form-data" 二者缺一不可;method="post" 以post方式提交表單，該方式對提交數據的大小沒有限制

enctype="multipart/form-data" 表示數據以二進制格式進行提交，負責上傳文件的表單必須為該編碼類型
<input>中添加accept="image/*" ，表示提交的文件只能為圖片，若沒有添加該內容，則圖片、文檔等類型的文件都可以提交

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3 <head>
 4 <title>單個文件上傳</title>
 5 </head>
 6 <body>
 7 
 8 <h2><font color="#a52a2a" size="4">圖片上傳</font></h2>
 9 
10 <form action="uploadFile" method="post" enctype="multipart/form-data">
11 <input type="file" name="uploadFile" accept="image/*"><br><br>
12 <input type="submit" value="上傳">
13 </form>
14 
15 </body>
16 </html>

在src代碼目錄下創建com.CD4356.controller包，在包中創建控制器類UploadController

在UploadController類中定義一個start方法，用來跳轉到uploadFile.jsp

 1 package com.CD4356.controller;
 2 
 3 import org.springframework.stereotype.Controller;
 4 import org.springframework.web.bind.annotation.RequestMapping;
 5 
 6 @Controller
 7 public class UploadController {
 8 
 9 　　@RequestMapping(value = "start")
10 　　public String start(){
11 　　　　return "uploadFile";
12 　　}
13 }

在類中添加uploadFile()方法，用來處理上傳的圖片

package com.CD4356.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Controller
public class UploadController {

    @RequestMapping(value = "start")
    public String start(){
        return "uploadFile";
    }

    // 單個圖片上傳
    @RequestMapping(value = "/uploadFile")
    // 使用HttpServletRequest需導入javax.servlet-api-4.0.1.jar
    // 上傳的文件自動綁定到MultipartFile中
    public String uploadFile(@RequestParam("uploadFile") MultipartFile uploadFile , HttpServletRequest request) throws IOException {
        // 判斷文件是否成功上傳
        if(uploadFile!=null){
            // 指定上傳圖片的保存路徑
            String path=request.getServletContext().getRealPath("/image/");
            // 獲取上傳的文件名全稱
            String fileName=uploadFile.getOriginalFilename();
            // 獲取上傳文件的后綴名
            String suffix=fileName.substring(fileName.lastIndexOf("."));
            // 給文件定義一個新的名稱,杜絕文件重名覆蓋現象
            String newFileName= UUID.randomUUID().toString()+suffix;

            // 創建File對象,注意這里不是創建一個目錄或一個文件,你可以理解為是 獲取指定目錄中文件的管理權限(增改刪除判斷等 . . .)
            File tempFile=new File(path);
            // 判斷File對象對應的目錄是否存在
            if(!tempFile.exists()){
                // 創建以此抽象路徑名命名的目錄,注意mkdir()只能創建一級目錄,所以它的父級目錄必須存在
                tempFile.mkdir();
            }
            // 在指定路徑中創建一個文件(該文件是空的)
            File file=new File(path + newFileName);
            // 將上傳的文件寫入指定文件
            uploadFile.transferTo(file);
            
            // 將新文件名添加到HttpServletRequest
            request.setAttribute("newFileName",newFileName);
        }
        return "uploadFile";
    }
    
}

Spring MVC 會將上傳文件綁定到 MultipartFile 對象中。MultipartFile 提供了獲取上傳文件內容、文件名等內容，通過其 transferTo() 還可將文件轉存到硬盤中

具體如下：

　　1：byte[] getBytes()：獲取文件數據
　　2：String getOriginalFilename()：獲取上傳文件原名全稱
　　3：boolean isEmpty()：是否有上傳的文件，文件是否為null
　　4：long getSize()：獲取文件的字節大小，單位為byte
　　5：void transferTo(File dest)：將上傳文件轉存到一個目標文件中

添加圖片顯示功能

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3 <head>
 4     <title>單個文件上傳</title>
 5 </head>
 6 <body>
 7 
 8 <h2><font color="#a52a2a" size="4">圖片上傳</font></h2>
 9 
10 <form action="uploadFile" method="post" enctype="multipart/form-data">
11     <input type="file" name="uploadFile" accept="image/*"><br><br>
12     <input type="submit" value="上傳">
13 </form>
14 
15 <br>
16 <h2><font color="#a52a2a" size="4">圖片顯示</font></h2>
17 
18 <img src="img/${newFileName}" width="200px" height="180px">
19 <br>
20 <h4><font color="#a52a2a" size="4">文件名: ${newFileName}</font></h4>
21 
22 </body>
23 </html>

效果圖展示：

同時上傳多個圖片

在page中創建uploadMultipleFile.jsp文件

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3 <head>
 4     <title>多個文件同時上傳</title>
 5 </head>
 6 <body>
 7 
 8 <div style="float:left">
 9 <h2><font color="#a52a2a" size="4">圖片上傳</font></h2>
10 <form action="uploadMultipleFile" method="post" enctype="multipart/form-data">
11     <input type="file" name="uploadFile" accept="image/*"><br><br>
12     <input type="file" name="uploadFile" accept="image/*"><br><br>
13     <input type="file" name="uploadFile" accept="image/*"><br><br>
14     <input type="submit" value="上傳">
15 </form>
16 </div>
17 
18 </body>
19 </html>

在UploadController類中定義一個jump方法，用來跳轉到uploadMultipleFile.jsp

1 @RequestMapping(value = "/jump")
2     public String jump(){
3         return "uploadMultipleFile";
4     }

在UploadController類中添加uploadMultipleFile方法，用來處理同時上傳的多個圖片

 1     // 多個圖片上傳
 2     @RequestMapping(value = "/uploadMultipleFile")
 3     public String uploadMultipleFile(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) throws IOException {
 4         // 文件存儲路徑
 5         String path = request.getSession().getServletContext().getRealPath("/image/");
 6         // 使用HashMap鍵值對存儲上傳的文件
 7         Map<String,Object> map=new HashMap<>();
 8 
 9         if(files!=null && files.length>0){
10             for(int i=0;i<files.length;i++) {
11                 if (files[i] != null) {
12                     // 獲取上傳的文件名
13                     String fileName = files[i].getOriginalFilename();
14                     // 在指定路徑中創建一個文件(該文件是空的)
15                     File file = new File(path + fileName);
16                     // 將上傳的文件寫入指定路徑
17                     files[i].transferTo(file);
18                     map.put(fileName,fileName);
19                 }
20                 request.setAttribute("map",map);
21             }
22         }
23         return "uploadMultipleFile";
24     }

在uploadMultipleFile.jsp文件中添加多個圖片顯示功能，使用迭代標簽 <c:forEach>對圖片輸出顯示，使用 <c:forEach>標簽需導入jstl-1.2.jar包

 1 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 2 <%--
 3   Created by IntelliJ IDEA.
 4   User: CD4356
 5   Date: 2019/3/24
 6   Time: 18:42
 7   To change this template use File | Settings | File Templates.
 8 --%>
 9 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
10 <html>
11 <head>
12     <title>多個文件同時上傳</title>
13 </head>
14 <body>
15 
16 <div style="float:left">
17 <h2><font color="#a52a2a" size="4">圖片上傳</font></h2>
18 <form action="uploadMultipleFile" method="post" enctype="multipart/form-data">
19     <input type="file" name="files" accept="image/*"><br><br>
20     <input type="file" name="files" accept="image/*"><br><br>
21     <input type="file" name="files" accept="image/*"><br><br>
22     <input type="submit" value="上傳">
23 </form>
24 </div>
25 
26 <div style="flex-flow: nowrap">
27 <h2><font color="#a52a2a" size="4">上傳的圖片</font></h2>
28 <table>
29     <tr>
30         <c:forEach items="${map}" var="image">
31             <td  style="width: 150px">
32                 <img src="img/${image.value}" width="100px" height="100px">
33             </td>
34         </c:forEach>
35     </tr>
36 </table>
37 </div>
38 
39 </body>
40 </html>

效果圖展示：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Spring MVC環境中的文件上傳功能實現 MVC3無刷新上傳圖片並顯示 MVC應用程序顯示上傳的圖片 layui 圖片上傳+表單提交+ Spring MVC summernote + spring mvc + ajax 上傳圖片 <筆記> spring mvc實現文件上傳與下載 ASP.NET MVC圖片管理(上傳，預覽與顯示) Java中實現圖片的上傳 Spring MVC - MultipartFile實現文件上傳(單文件與多文件上傳) Spring MVC JasperReport 導出Html格式報表圖片不顯示