SpringMVC中怎么利用dropzone組件實現圖片上傳功能

今天就跟大家聊聊有關SpringMVC中怎么利用dropzone組件實現圖片上傳功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

一、dropzone導入

01.dropzone官網下載其插件壓縮包并復制項目；

02.將CSS和JS文件在HTML文件中引入；

//下面src中的地址根據自己文件地址進行修改，不能之間copy，否則可能用不了！！！<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/dropzone.min.css" rel="external nofollow" /><link rel="stylesheet" href="/static/assets/plugins/dropzone/min/basic.min.css" rel="external nofollow" /><script src="/static/assets/plugins/dropzone/min/dropzone.min.js"></script>

二、dropzone的使用

只需要一個 p 元素，用 JavaScript 代碼啟用即可

HTML 結構如下：

<p id="dropz" class="dropzone"></p>

JavaScript 啟用代碼如下：

<script>var myDropzone = new Dropzone("#dropz", {  url: "/upload", //需要上傳的后臺接口地址  dictDefaultMessage: '拖動文件至此或者點擊上傳', // 設置默認的提示語句  paramName: "dropzFile", // 傳到后臺的參數名稱  init: function () {    this.on("success", function (file, data) {      // 上傳成功觸發的事件    });  }});</script>

前端工作做完后，后臺需要提供文件上傳支持，我們使用 Spring MVC 來接收上傳的文件

三、SpringMVC的處理

commons-fileupload jar包導入

01.如果使用Meaven倉庫，在其Pom.xml添加如下依賴。

<dependency>  <groupId>commons-fileupload</groupId>  <artifactId>commons-fileupload</artifactId>  <version>1.3.2</version></dependency>

如果未使用Meaven，百度commons-fileupload下載jar并復制到項目中。

配置 spring-mvc.xml

需要 Spring 注入 multipartResolver 實例，spring-mvc.xml 增加如下配置：

<!-- 上傳文件攔截，設置最大上傳文件大小 10M = 10*1024*1024(B) = 10485760 bytes --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  <property name="maxUploadSize" value="10485760"/></bean>

Controller類的代碼實現

@Controllerpublic class UploadController {  @ResponseBody  @RequestMapping(value = "upload", method = RequestMethod.POST)  public String upload(MultipartFile dropzFile, HttpServletRequest request) {    // 獲取上傳的原始文件名    String fileName = dropzFile.getOriginalFilename();    // 設置文件上傳路徑    String filePath = request.getSession().getServletContext().getRealPath("/static/upload");    // 獲取文件后綴    String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());    // 判斷并創建上傳用的文件夾    File file = new File(filePath);    if (!file.exists()) {      file.mkdir();    }    // 重新設置文件名為 UUID，以確保唯一    file = new File(filePath, UUID.randomUUID() + fileSuffix);    try {      // 寫入文件      dropzFile.transferTo(file);    } catch (IOException e) {      e.printStackTrace();    }    return "";  }}

看完上述內容，你們對SpringMVC中怎么利用dropzone組件實現圖片上傳功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。