SpringMVC實現ajax上傳圖片實時預覽

言曌發表於2018-03-03
SpringMVC

本文介紹使用 SpringMVC + ajaxfileupload.js 實現 ajax 上傳檔案。

先看效果圖

SpringMVC實現ajax上傳圖片實時預覽

 

點選上傳檔案框，觸發上傳檔案方法，然後後臺返回圖片的 url，進行顯示。

 

實現方法如下

一、前臺程式碼

1、add.jsp (或者 html 檔案)

  1. <input type="file" name="file" id="file" onchange="uploadImg()">
  2. <input type="hidden" name="avatar" id="avatar">
  3. <img src="" alt="" id="avatarShow" width="100px" height="100px">

 

2、引入 jquery 和 ajaxfileupload.js

  1. <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
  2. <script src="${pageContext.request.contextPath}/static/js/ajaxfileupload.js"></script>

這裡給出 ajaxfileupload.js 下載地址，網上也有下載

這裡有個坑，詳情看這裡 使用ajaxfileupload.js上傳檔案成功之後，沒有執行success方法

 

3、ajax 程式碼

  1. <script>
  2.     //ajax提交資訊
  3.     function uploadImg() {
  4.         if($("#file").val() != "") {
  5.             $.ajaxFileUpload({
  6.                 type: "POST",
  7.                 url:"${pageContext.request.contextPath}/uploadFile",
  8.                 dataType: "json",
  9.                 fileElementId:"file",  // 檔案的id
  10.                 success: function(d){
  11.                     if(d.code == 0) {
  12.                         //alert("上傳成功");
  13.                         //圖片顯示
  14.                         $("#avatar").attr("value",d.data.url);
  15.                         $("#avatarShow").attr("src",d.data.url);
  16.                     }
  17.                 },
  18.                 error: function () {
  19.                     alert("上傳失敗");
  20.                 },
  21.             });
  22.         } else {
  23.             alert("請先選擇檔案");
  24.         }
  25.     }
  27. </script>

需要放在 上面兩個庫的後面

注意：

① type 填 post

② 第8行的 dataType 是小寫的 json，不要寫成大寫的啦

③ 第9行的 fileElementId 填檔案框的id

④ 先確保 url 沒寫錯

 

二、後臺程式碼

1、給 maven 新增依賴

①、首先需要匯入 json 的依賴

  1. <!-- jackson -->
  2.     <dependency>
  3.       <groupId>com.fasterxml.jackson.core</groupId>
  4.       <artifactId>jackson-databind</artifactId>
  5.       <version>2.5.0</version>
  6.     </dependency>
  7.     <dependency>
  8.       <groupId>com.fasterxml.jackson.core</groupId>
  9.       <artifactId>jackson-core</artifactId>
  10.       <version>2.5.0</version>
  11.     </dependency>
  12.     <dependency>
  13.       <groupId>com.fasterxml.jackson.core</groupId>
  14.       <artifactId>jackson-annotations</artifactId>
  15.       <version>2.5.0</version>
  16.     </dependency>

 

②、然後需要上傳檔案的依賴

  1. <dependency>
  2.    <groupId>commons-fileupload</groupId>
  3.    <artifactId>commons-fileupload</artifactId>
  4.    <version>1.3.1</version>
  5.  </dependency>
  6.  <dependency>
  7.    <groupId>commons-io</groupId>
  8.    <artifactId>commons-io</artifactId>
  9.    <version>2.4</version>
  10.  </dependency>

 

2、spring-mvc.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.        xmlns:mvc="http://www.springframework.org/schema/mvc"
  4.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  5.        xmlns:context="http://www.springframework.org/schema/context"
  6.        xsi:schemaLocation="
  7.                 http://www.springframework.org/schema/beans
  8.                 http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
  9.                 http://www.springframework.org/schema/context
  10.                 http://www.springframework.org/schema/context/spring-context-3.1.xsd
  11.                 http://www.springframework.org/schema/mvc
  12.                 http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd" >
  14.     <!-- 啟用SpringMVC的註解功能,它會自動註冊HandlerMapping、HandlerAdapter、ExceptionResolver的相關例項 -->
  15.     <mvc:annotation-driven />
  16.     <!-- SpringMVC的掃描範圍 -->
  17.     <context:component-scan base-package="com.liuyanzhao.blog.controller" use-default-filters="false">
  18.         <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
  19.         <context:include-filter type="annotation" expression="org.springframework.web.bind.annotation.ControllerAdvice"/>
  20.     </context:component-scan>
  22.     <!-- 用於返回json格式 -->
  23.     <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
  24.         <property name="supportedMediaTypes">
  25.             <list>
  26.                 <value>application/x-www-form-urlencoded;charset=UTF-8</value>
  27.             </list>
  28.         </property>
  29.     </bean>
  31.     <!-- 完成請求和註解POJO的對映 -->
  32.     <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
  33.         <property name="messageConverters">
  34.             <list >
  35.                 <ref bean="mappingJacksonHttpMessageConverter" />
  36.             </list>
  37.         </property>
  38.     </bean>
  40.     <!-- 配置SpringMVC的檢視解析器 -->
  41.     <!-- 其viewClass屬性的預設值就是org.springframework.web.servlet.view.JstlView -->
  42.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  43.         <!-- <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> -->
  44.         <property name="prefix" value="/WEB-INF/views/" />
  45.         <property name="suffix" value=".jsp" />
  46.     </bean>
  49.     <!--檔案上傳-->
  50.     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  51.         <!--設定上傳最大尺寸為50MB-->
  52.         <property name="maxUploadSize" value="52428800"/>
  53.         <property name="defaultEncoding" value="UTF-8"/>
  54.         <property name="resolveLazily" value="true"/>
  55.     </bean>
  58. </beans>

上面是 spring-mvc.xml 所有的程式碼

一定要新增 檔案上傳 那塊程式碼（50-55行）

然後 31-38 行的 物件轉成JSON 也要正確

 

 

3、UploadFileController.java

  1. package com.liuyanzhao.blog.controller;
  3. import com.liuyanzhao.blog.vo.ResultVO;
  4. import com.liuyanzhao.blog.vo.UploadFileVO;
  5. import org.springframework.data.repository.query.Param;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RequestMethod;
  10. import org.springframework.web.bind.annotation.ResponseBody;
  11. import org.springframework.web.multipart.MultipartFile;
  12. import java.io.File;
  13. import java.io.IOException;
  14. import java.util.Calendar;
  16. @Controller
  17. public class UploadFileController {
  18.     //上傳檔案
  19.     @RequestMapping(value = "/uploadFile",method = RequestMethod.POST)
  20.     @ResponseBody
  21.     public ResultVO uploadFile(@Param("file")MultipartFile file) throws IOException {
  23.         //本地使用,上傳位置
  24.         String rootPath ="/Users/liuyanzhao/Documents/uploads/";
  25.         //String rootPath ="/www/uploads/";
  27.         //檔案的完整名稱,如spring.jpeg
  28.         String filename = file.getOriginalFilename();
  29.         //檔名,如spring
  30.         String name = filename.substring(0,filename.indexOf("."));
  31.         //檔案字尾,如.jpeg
  32.         String suffix = filename.substring(filename.lastIndexOf("."));
  34.         //建立年月資料夾
  35.         Calendar date = Calendar.getInstance();
  36.         File dateDirs = new File(date.get(Calendar.YEAR)
  37.                 + File.separator + (date.get(Calendar.MONTH)+1));
  39.         //目標檔案
  40.         File descFile = new File(rootPath+File.separator+dateDirs+File.separator+filename);
  41.         int i = 1;
  42.         //若檔案存在重新命名
  43.         String newFilename = filename;
  44.         while(descFile.exists()) {
  45.             newFilename = name+"("+i+")"+suffix;
  46.             String parentPath = descFile.getParent();
  47.             descFile = new File(parentPath+File.separator+dateDirs+File.separator+newFilename);
  48.             i++;
  49.         }
  50.         //判斷目標檔案所在的目錄是否存在
  51.         if(!descFile.getParentFile().exists()) {
  52.             //如果目標檔案所在的目錄不存在，則建立父目錄
  53.             descFile.getParentFile().mkdirs();
  54.         }
  56.         //將記憶體中的資料寫入磁碟
  57.         file.transferTo(descFile);
  58.         //完整的url
  59.         String fileUrl =  "/uploads/"+dateDirs+ "/"+newFilename;
  61.         ResultVO resultVO = new ResultVO();
  62.         resultVO.setCode(0);
  63.         resultVO.setMsg("成功");
  65.         UploadFileVO uploadFileVO = new UploadFileVO();
  66.         uploadFileVO.setTitle(filename);
  67.         uploadFileVO.setUrl(fileUrl);
  68.         resultVO.setData(uploadFileVO);
  70.         return resultVO;
  71.     }
  72. }

 

注意：

① 一定要加  @ResponseBody   註解，加了 @ResponseBody 註解，我們返回的 resultVO 物件會轉成 JSON 返回前臺。這個依賴於前面說的 spirng-mvc.xml 裡的 JSON 配置

② 返回給前臺的 JSON 格式如下

SpringMVC實現ajax上傳圖片實時預覽

所以我這裡封裝了物件 resultVO 和 uploadFileVO 具體類下面會給出

③ 記得要修改第30行的本地路徑，這個路徑待會兒還要配靜態資源對映

 

4、ResultVO.java 和 UploadFileVO.java

① ResultVO.java

  1. package com.liuyanzhao.blog.VO;
  3. /**
  4.  * @author 言曌
  5.  * @date 2017/11/30 下午7:04
  6.  */
  8. public class ResultVO<T> {
  10.     //錯誤碼
  11.     private Integer code;
  13.     //提示資訊
  14.     private String msg;
  16.     //返回的具體內容
  17.     private T data;
  19.     public Integer getCode() {
  20.         return code;
  21.     }
  23.     public void setCode(Integer code) {
  24.         this.code = code;
  25.     }
  27.     public String getMsg() {
  28.         return msg;
  29.     }
  31.     public void setMsg(String msg) {
  32.         this.msg = msg;
  33.     }
  35.     public T getData() {
  36.         return data;
  37.     }
  39.     public void setData(T data) {
  40.         this.data = data;
  41.     }
  42. }

這裡的 T 表示泛型

② UploadFileVO.java

  1. package com.liuyanzhao.blog.VO;
  3. /**
  4.  * @author 言曌
  5.  * @date 2017/11/30 下午7:41
  6.  */
  8. public class UploadFileVO {
  10.     private String url;
  12.     private String title;
  14.     public String getUrl() {
  15.         return url;
  16.     }
  18.     public void setUrl(String url) {
  19.         this.url = url;
  20.     }
  22.     public String getTitle() {
  23.         return title;
  24.     }
  26.     public void setTitle(String title) {
  27.         this.title = title;
  28.     }
  29. }

因為這裡是上傳圖片，我們需要給前臺返回返回一個 檔案的URL，所以這裡封裝一個物件，用來拼接JSON。

 

三、設定靜態資源對映，用於顯示圖片

我這裡設定上傳檔案到 /Users/liuyanzhao/Documents/uploads 目錄

比如有一張圖片的本地路徑為

/Users/liuyanzhao/Documents/uploads/2017/11/2017113021011541.jpg

我們想讓它能在伺服器上訪問，需要給 Tomcat 配置靜態資源對映

方法一、

使用 IDE 配置，比如我使用的是 IntelliJ IDEA 可以在 Tomcat 的配置 Development 裡，如圖

SpringMVC實現ajax上傳圖片實時預覽

方法二、

如果你是直接啟動本地的 Tomcat，而不是 IDE 的（不太記得 Eclipse 能不能直接設定），可以在 Tomcat 的目錄下的 config/server.xml 裡

我的是

/Users/liuyanzhao/Documents/JavaStudy/tomcat/apache-tomcat-7.0.37/conf/server.xml

在最後的 </Host> 裡新增

  1. <!-- 增加的靜態資源對映配置 -->
  2. <Context path="/uploads" docBase="/Users/liuyanzhao/Documents/uploads" reloadable="true" crossContext="true"></Context>

如圖

SpringMVC實現ajax上傳圖片實時預覽

 

SpringMVC實現ajax上傳圖片實時預覽

 

 

如圖，這張圖片的 url 是

/uploads/2017/11/2017113022393913.jpg

即

http://localhost:8090/uploads/2017/11/2017113022393913.jpg

 

 

本文連結：https://liuyanzhao.com/6833.html

相關文章