实操：Dropzone.js实现文件上传

🏠官网

点我前往

🥓依赖

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

可选：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

🎈案例

实现手动上传，已选待上传图片可删除，图片可预览

容器：

<h1>文件上传：</h1>
<div><form action="/upload" class="dropzone" id="myDropzone"><div class="fallback"><input name="file" type="file" multiple /></div></form><button id="uploadButton">上传文件</button>
</div>

配置：

<script>// 配置DropzoneDropzone.options.myDropzone = {url: "/upload",method: "post",autoProcessQueue: false, // 设置为false，表示手动触发上传maxFilesize: 10, // 最大文件大小，单位为MBmaxFiles: 3, // 最大上传文件数量acceptedFiles: ".jpg", // 允许上传的文件类型addRemoveLinks: true, // 显示移除文件的链接dictDefaultMessage: "拖放文件到这里或点击上传", // Dropzone区域的默认消息dictRemoveFile: "移除文件", // 移除文件链接的文本init: function() {this.on("removedfile", function(file) {// 移除文件时的操作console.log("文件 " + file.name + " 已被移除");});}};Dropzone.autoDiscover = false;// 初始化Dropzonevar myDropzone = new Dropzone("#myDropzone", {url: "/upload",autoProcessQueue: false // 设置为false，表示手动触发上传});// 手动触发上传document.getElementById("uploadButton").addEventListener("click", function() {myDropzone.processQueue();});
</script>

可选样式：

<style>.dropzone {border: 2px dashed #ccc;border-radius: 5px;padding: 20px;text-align: center;cursor: pointer;}.dropzone:hover {background-color: #f0f0f0;}.fallback input[type="file"] {display: none;}
</style>

🧨后端接口

package com.xxx.rentcarease.controller;import cn.dev33.satoken.util.SaResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.UUID;@RestController
public class FileUploadController {@PostMapping("/upload")public SaResult uploadFile(@RequestParam("file") MultipartFile file) {if (file.isEmpty()) {return SaResult.error("请选择要上传的文件");}try {// 上传文件到 src/main/resources/static/img 目录下String fileName = uploadFileToDirectory(file, "src/main/resources/static/img/");// 上传文件到 target/classes/static/img 目录下uploadFileToDirectory(file, "target/classes/static/img/");return SaResult.ok("文件上传成功，保存路径为：" + fileName);} catch (IOException e) {e.printStackTrace();return SaResult.error("文件上传失败：" + e.getMessage());}}private String uploadFileToDirectory(MultipartFile file, String directory) throws IOException {// 获取静态资源目录的绝对路径Path uploadPath = Paths.get(directory);// 生成UUID并截取其中的一部分UUID uuid = UUID.randomUUID();String uuidPart = uuid.toString().substring(0, 8); // 只取UUID的前8个字符// 保存文件byte[] bytes = file.getBytes();String fileName = uuidPart + "_" + file.getOriginalFilename();Path filePath = uploadPath.resolve(fileName);Files.write(filePath, bytes);return filePath.toString();}
}

🎨效果

附：

页面完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传测试页面</title><!-- 引入 Dropzone.js 样式 --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css"/><!-- 引入 Dropzone.js 脚本 --><script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script><!-- 引入 jQuery 库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><style>.dropzone {border: 2px dashed #ccc;border-radius: 5px;padding: 20px;text-align: center;cursor: pointer;}.dropzone:hover {background-color: #f0f0f0;}.fallback input[type="file"] {display: none;}</style>
</head>
<body>
<hr>
<!-- 文件上传区域 -->
<h1>文件上传：</h1>
<div><form action="/upload" class="dropzone" id="myDropzone"><div class="fallback"><input name="file" type="file" multiple /></div></form><button id="uploadButton">上传文件</button>
</div><script>// 配置DropzoneDropzone.options.myDropzone = {url: "/upload",method: "post",autoProcessQueue: false, // 设置为false，表示手动触发上传maxFilesize: 10, // 最大文件大小，单位为MBmaxFiles: 3, // 最大上传文件数量acceptedFiles: ".jpg", // 允许上传的文件类型addRemoveLinks: true, // 显示移除文件的链接dictDefaultMessage: "拖放文件到这里或点击上传", // Dropzone区域的默认消息dictRemoveFile: "移除文件", // 移除文件链接的文本init: function() {this.on("removedfile", function(file) {// 移除文件时的操作console.log("文件 " + file.name + " 已被移除");});}};Dropzone.autoDiscover = false;// 初始化Dropzonevar myDropzone = new Dropzone("#myDropzone", {url: "/upload",autoProcessQueue: false // 设置为false，表示手动触发上传});// 手动触发上传document.getElementById("uploadButton").addEventListener("click", function() {myDropzone.processQueue();});
</script></body>
</html>