學習完整課程請移步 互聯(lián)網(wǎng) Java 全棧工程師
Dropzone 是一個開源的 JavaScript 庫奔害，提供文件的異步上傳功能尔店，并支持拖拽上傳功能
頁面引用
CSS 部分，其中 basic.min.css 提供了官網(wǎng)的炫酷上傳效果
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/dropzone.min.css" />
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/basic.min.css" />
JS 部分
<script src="/static/assets/plugins/dropzone/min/dropzone.min.js"></script>
啟用 Dropzone
只需要一個 div 元素，用 JavaScript 代碼啟用即可
HTML 結構如下：
<div id="dropz" class="dropzone"></div>
JavaScript 啟用代碼如下：
var myDropzone = new Dropzone("#dropz", {
url: "/upload",
dictDefaultMessage: '拖動文件至此或者點擊上傳', // 設置默認的提示語句
paramName: "dropzFile", // 傳到后臺的參數(shù)名稱
init: function () {
this.on("success", function (file, data) {
// 上傳成功觸發(fā)的事件
});
}
});
其中 url 是必須的值，指明文件上傳提交到哪個頁面。其他的值都是可選的匠题，如果使用默認值的話可以省略。
配置 Dropzone
此插件的特色就在于非常靈活但金，提供了許多可選項韭山、事件等。下面分類介紹常用的配置項。
功能選項
-
url：最重要的參數(shù)钱磅，指明了文件提交到哪個頁面 -
method：默認為post梦裂，如果需要，可以改為put -
paramName：相當于<input>元素的name屬性盖淡，默認為file -
maxFilesize：最大文件大小年柠，單位是 MB -
maxFiles：默認為 null，可以指定為一個數(shù)值褪迟，限制最多文件數(shù)量 -
addRemoveLinks：默認 false冗恨。如果設為 true，則會給文件添加一個刪除鏈接 -
acceptedFiles：指明允許上傳的文件類型味赃，格式是逗號分隔的 MIME type 或者擴展名掀抹。例如：image/*, application/pdf, .psd, .obj -
uploadMultiple：指明是否允許 Dropzone 一次提交多個文件。默認為 false心俗。如果設為 true傲武，則相當于 HTML 表單添加 multiple 屬性 -
headers：如果設定，則會作為額外的 header 信息發(fā)送到服務器城榛。例如：{"custom-header": "value"} -
init：一個函數(shù)谱轨，在 Dropzone 初始化的時候調用，可以用來添加自己的事件監(jiān)聽器 -
forceFallback：Fallback 是一種機制吠谢，當瀏覽器不支持此插件時，提供一個備選方案诗茎。默認為 false工坊。如果設為 true，則強制 fallback -
fallback：一個函數(shù)敢订，如果瀏覽器不支持此插件則調用
翻譯選項
-
dictDefaultMessage：沒有任何文件被添加的時候的提示文本 -
dictFallbackMessage：Fallback 情況下的提示文本 -
dictInvalidInputType：文件類型被拒絕時的提示文本 -
dictFileTooBig：文件大小過大時的提示文本 -
dictCancelUpload：取消上傳鏈接的文本 -
dictCancelUploadConfirmation：取消上傳確認信息的文本 -
dictRemoveFile：移除文件鏈接的文本 -
dictMaxFilesExceeded：超過最大文件數(shù)量的提示文本
常用事件
以下事件接收 file 為第一個參數(shù)
-
addedfile：添加了一個文件時發(fā)生 -
removedfile：一個文件被移除時發(fā)生王污。你可以監(jiān)聽這個事件并手動從服務器刪除這個文件 -
uploadprogress：上傳時按一定間隔發(fā)生這個事件。第二個參數(shù)為一個整數(shù)楚午，表示進度昭齐，從 0 到 100。第三個參數(shù)是一個整數(shù)矾柜，表示發(fā)送到服務器的字節(jié)數(shù)阱驾。當一個上傳結束時，Dropzone 保證會把進度設為 100怪蔑。注意：這個函數(shù)可能被以同一個進度調用多次 -
success：文件成功上傳之后發(fā)生里覆，第二個參數(shù)為服務器響應 -
complete：當文件上傳成功或失敗之后發(fā)生 -
canceled：當文件在上傳時被取消的時候發(fā)生 -
maxfilesreached：當文件數(shù)量達到最大時發(fā)生 -
maxfilesexceeded：當文件數(shù)量超過限制時發(fā)生
以下事件接收一個 file list 作為第一個參數(shù)（僅當 uploadMultiple 被設為 true 時才會發(fā)生）
successmultiplecompletemultiplecancelmultiple
特殊事件
-
totaluploadprogress：第一個參數(shù)為總上傳進度，第二個參數(shù)為總字節(jié)數(shù)缆瓣，第三個參數(shù)為總上傳字節(jié)數(shù)喧枷。
使用案例
var myDropzone = new Dropzone("#dropz", {
url: "/upload", // 文件提交地址
method: "post", // 也可用put
paramName: "file", // 默認為file
maxFiles: 1,// 一次性上傳的文件數(shù)量上限
maxFilesize: 2, // 文件大小，單位：MB
acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上傳的類型
addRemoveLinks: true,
parallelUploads: 1,// 一次上傳的文件數(shù)量
//previewsContainer:"#preview", // 上傳圖片的預覽窗口
dictDefaultMessage: '拖動文件至此或者點擊上傳',
dictMaxFilesExceeded: "您最多只能上傳1個文件！",
dictResponseError: '文件上傳失敗!',
dictInvalidFileType: "文件類型只能是*.jpg,*.gif,*.png,*.jpeg隧甚。",
dictFallbackMessage: "瀏覽器不受支持",
dictFileTooBig: "文件過大上傳文件最大支持.",
dictRemoveLinks: "刪除",
dictCancelUpload: "取消",
init: function () {
this.on("addedfile", function (file) {
// 上傳文件時觸發(fā)的事件
});
this.on("success", function (file, data) {
// 上傳成功觸發(fā)的事件
});
this.on("error", function (file, data) {
// 上傳失敗觸發(fā)的事件
});
this.on("removedfile", function (file) {
// 刪除文件時觸發(fā)的方法
});
}
});
服務端支持
前端工作做完后车荔，后臺需要提供文件上傳支持，我們使用 Spring MVC 來接收上傳的文件
POM
Spring MVC 上傳文件需要 commons-fileupload:commons-fileupload 依賴支持戚扳，pom.xml 文件如下：
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
配置 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>
控制器關鍵代碼
以下為控制器中接收文件的關鍵代碼：
package com.funtl.my.shop.web.admin.web.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
/**
* 文件上傳控制器
* <p>Title: UploadController</p>
* <p>Description: </p>
*
* @author Lusifer
* @version 1.0.0
* @date 2018/6/27 0:42
*/
@Controller
public class UploadController {
@ResponseBody
@RequestMapping(value = "upload", method = RequestMethod.POST)
public Map<String, Object> upload(MultipartFile dropzFile, HttpServletRequest request) {
Map<String, Object> result = new HashMap<>();
// 獲取上傳的原始文件名
String fileName = dropzFile.getOriginalFilename();
// 設置文件上傳路徑
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();
}
// 重新設置文件名為 UUID咖城，以確保唯一
file = new File(filePath, UUID.randomUUID() + fileSuffix);
try {
// 寫入文件
dropzFile.transferTo(file);
} catch (IOException e) {
e.printStackTrace();
}
// 返回 JSON 數(shù)據(jù)茬腿，這里只帶入了文件名
result.put("fileName", file.getName());
return result;
}
}
