操作步驟如下

一、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的使用

只需要一個 div 元素，用 JavaScript 程式碼啟用即可

HTML 結構如下：

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

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類的程式碼實現

@Controller
public 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 "";
  }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。