快捷導(dǎo)航

SpringMVC利用dropzone組件實(shí)現(xiàn)圖片上傳

更新時(shí)間：2020年02月14日 15:43:35 作者：98巨人

這篇文章主要介紹了SpringMVC利用dropzone組件實(shí)現(xiàn)圖片上傳，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

操作步驟如下

一、dropzone導(dǎo)入

01.dropzone官網(wǎng)下載其插件壓縮包并復(fù)制項(xiàng)目；

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

//下面src中的地址根據(jù)自己文件地址進(jìn)行修改，不能之間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的使用

只需要一個(gè) div 元素，用 JavaScript 代碼啟用即可

HTML 結(jié)構(gòu)如下：

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

JavaScript 啟用代碼如下：

<script>
var myDropzone = new Dropzone("#dropz", {
  url: "/upload", //需要上傳的后臺(tái)接口地址
  dictDefaultMessage: '拖動(dòng)文件至此或者點(diǎn)擊上傳', // 設(shè)置默認(rèn)的提示語(yǔ)句
  paramName: "dropzFile", // 傳到后臺(tái)的參數(shù)名稱(chēng)
  init: function () {
    this.on("success", function (file, data) {
      // 上傳成功觸發(fā)的事件
      
    });
  }
});
</script>

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

三、SpringMVC的處理

commons-fileupload jar包導(dǎo)入

01.如果使用Meaven倉(cāng)庫(kù)，在其Pom.xml添加如下依賴(lài)。

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

如果未使用Meaven，百度commons-fileupload下載jar并復(fù)制到項(xiàng)目中。

配置 spring-mvc.xml

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

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

Controller類(lèi)的代碼實(shí)現(xiàn)

@Controller
public class UploadController {

  @ResponseBody
  @RequestMapping(value = "upload", method = RequestMethod.POST)
  public String upload(MultipartFile dropzFile, HttpServletRequest request) {
   

    // 獲取上傳的原始文件名
    String fileName = dropzFile.getOriginalFilename();
    // 設(shè)置文件上傳路徑
    String filePath = request.getSession().getServletContext().getRealPath("/static/upload");
    // 獲取文件后綴
    String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

    // 判斷并創(chuàng)建上傳用的文件夾
    File file = new File(filePath);
    if (!file.exists()) {
      file.mkdir();
    }
    // 重新設(shè)置文件名為 UUID，以確保唯一
    file = new File(filePath, UUID.randomUUID() + fileSuffix);

    try {
      // 寫(xiě)入文件
      dropzFile.transferTo(file);
    } catch (IOException e) {
      e.printStackTrace();
    }

   
    return "";
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: