溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
操作步驟如下
一、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 "";
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
