您好,登錄后才能下訂單哦!
操作步驟如下
一、dropzone導(dǎo)入
01.dropzone官網(wǎng)下載其插件壓縮包并復(fù)制項目;
02.將CSS和JS文件在HTML文件中引入;
//下面src中的地址根據(jù)自己文件地址進行修改,不能之間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 結(jié)構(gòu)如下:
<div id="dropz" class="dropzone"></div>
JavaScript 啟用代碼如下:
<script> var myDropzone = new Dropzone("#dropz", { url: "/upload", //需要上傳的后臺接口地址 dictDefaultMessage: '拖動文件至此或者點擊上傳', // 設(shè)置默認(rèn)的提示語句 paramName: "dropzFile", // 傳到后臺的參數(shù)名稱 init: function () { this.on("success", function (file, data) { // 上傳成功觸發(fā)的事件 }); } }); </script>
前端工作做完后,后臺需要提供文件上傳支持,我們使用 Spring MVC 來接收上傳的文件
三、SpringMVC的處理
commons-fileupload jar包導(dǎo)入
01.如果使用Meaven倉庫,在其Pom.xml添加如下依賴。
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.2</version> </dependency>
如果未使用Meaven,百度commons-fileupload下載jar并復(fù)制到項目中。
配置 spring-mvc.xml
需要 Spring 注入 multipartResolver 實例,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類的代碼實現(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 { // 寫入文件 dropzFile.transferTo(file); } catch (IOException e) { e.printStackTrace(); } return ""; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。