1.應(yīng)用場(chǎng)景：
拖拽上傳娶靡，可擴(kuò)展化編程的操作空間較大。
2.導(dǎo)入
<link rel="stylesheet" href="plugins/min/basic.min.css"/>
<link rel="stylesheet" href="plugins/min/dropzone.min.css" />
<script src="plugins/min/dropzone.min.js"></script>
3.聲明一個(gè)容器
<div id="dropz" class="dropzone"></div>
4.給容器添加屬性與監(jiān)聽(tīng)
<table align="center">
? ? ? ? <td>商品名:
? ? ? ? <td><input type="text" id="productName"/>
? ? ? ? <td>商品圖片:
? ? ? ? <td><input type="hidden" id="picName"/>
? ? ? ? ? ? <div id="dropzoneDiv" class="dropzone" style="width:200px;height:200px">
? ? ? ? <td colspan="2">
? ? ? ? ? ? <input type="button" value="提交" onclick="showVal()"/>
? ? Dropzone.options.dropzoneDiv = {
? ? ? ?url:"upload", // 文件提交地址（controller的方法）
? ? ? ? method:"post",? // 也可用put
? ? ? ? paramName:"dropzFile", // 默認(rèn)為file
? ? ? ? maxFiles:1,// 一次性上傳的文件數(shù)量上限
? ? ? ? maxFilesize:5, // 文件大小，單位：MB
? ? ? ? acceptedFiles:".jpg,.gif,.png,.jpeg,.txt,.doc,.docx", // 上傳的類型
? ? ? ? addRemoveLinks:true,
? ? ? ? parallelUploads:1,// 一次上傳的文件數(shù)量
? ? ? ? //previewsContainer:"#preview", // 上傳圖片的預(yù)覽窗口
? ? ? ? dictDefaultMessage:'拖動(dòng)文件至此或者點(diǎn)擊上傳',
? ? ? ? dictMaxFilesExceeded:"您最多只能上傳1個(gè)文件！",
? ? ? ? dictResponseError:'文件上傳失敗!',
? ? ? ? dictInvalidFileType:"文件類型只能是*.jpg,*.gif,*.png,*.jpeg,.txt,.doc,.docx。",
? ? ? ? dictFallbackMessage:"瀏覽器不受支持",
? ? ? ? dictFileTooBig:"文件過(guò)大上傳文件最大支持.",
? ? ? ? dictRemoveLinks:"刪除",
? ? ? ? dictCancelUpload:"取消",
? ? ? ? init:function () {
? ?this.on("addedfile", function (file) {
// 上傳文件時(shí)觸發(fā)的事件
? ? ? ? ? ? });
? ? ? ? ? ? this.on("success", function (file, data) {
// 上傳成功觸發(fā)的事件
? ? ? ? ? ? ? ? console.log(file);
? ? ? ? ? ? ? ? console.log(data);
? ? ? ? ? ? ? ? $("#picName").val("static/upload/"+data.fileName);
? ? ? ? ? ? });
? ? ? ? ? ? this.on("error", function (file, data) {
// 上傳失敗觸發(fā)的事件
? ? ? ? ? ? });
? ? ? ? ? ? this.on("removedfile", function (file) {
// 刪除文件時(shí)觸發(fā)的方法
? ? ? ? ? ? ? ? console.log(file);
? ? ? ? ? ? });
? ? ? ? }
}
function showVal() {
? ? ? ? alert($("#picName").val());
? ? ? ? alert($("#productName").val());
? ? }
</script>
5.controller
@Controller
public class UploadController {
@ResponseBody
? ? @RequestMapping(value ="upload", method = RequestMethod.POST)
public Mapupload(MultipartFile dropzFile, HttpServletRequest request) {
System.out.println("inner upload");
? ? ? ? System.out.println(dropzFile);
? ? ? ? Map result =new HashMap();
? ? ? ? // 獲取上傳的原始文件名
? ? ? ? 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.mkdirs();
? ? ? ? }
// 重新設(shè)置文件名為 UUID庄撮，以確保唯一
? ? ? ? file =new File(filePath, UUID.randomUUID() + fileSuffix);
? ? ? ? System.out.println(file.getAbsolutePath());
? ? ? ? if(!file.exists()){
try {
file.createNewFile();
? ? ? ? ? ? }catch (IOException e) {
e.printStackTrace();
? ? ? ? ? ? }
}
try {
// 寫(xiě)入文件
? ? ? ? ? ? dropzFile.transferTo(file);
? ? ? ? }catch (IOException e) {
e.printStackTrace();
? ? ? ? }
// 返回 JSON 數(shù)據(jù)，這里只帶入了文件名
? ? ? ? result.put("fileName", file.getName());
? ? ? ? return result;
? ? }
}
