今天就跟大家聊聊有關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組件實現圖片上傳功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創新互聯行業資訊頻道，感謝大家的支持。

分享題目：SpringMVC中怎么利用dropzone組件實現圖片上傳功能-創新互聯
本文地址：http://www.yijiale78.com/article18/cspgdp.html

成都網站建設公司_創新互聯，為您提供微信公眾號、網站導航、手機網站建設、自適應網站、Google、企業網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯