分布式文件上传 spring boot + fastdfs + dropzone
1.首先安装fastDFS 参考链接:
https://www.funtl.com/zh/spring-cloud-itoken-codeing/分布式文件系统-FastDFS.html
2.下载 Dropzone github地址 : https://github.com/enyo/dropzone
Dropzone官方文档 : https://www.dropzonejs.com/
3.下载JQuery.js 下载地址 : https://jquery.com/download/
4. 编写index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
<script src="/js/jquery-3.4.1.js" type="text/javascript"></script>
<script src="/dropzone/dropzone.js" type="text/javascript"></script>
<link href="/dropzone/dropzone.css" rel="stylesheet">
</head>
<body>
<div class="form-group">
<label class="col-sm-2 control-label">文件上传</label>
<input id="path" class="form-control" placeholder="文件上传路径" />
<div class="col-sm-10">
<div id="dropz" class="dropzone"></div>
</div>
</div>
<script>
$("#dropz").dropzone({
url: "/upload",
paramName: "dropFile",
maxFiles: 1, // 一次性上传的文件数量上限
maxFilesize: 1024, // 文件大小,单位:MB
acceptedFiles: ".jpg,.gif,.png,.jpeg,.mp4", // 上传的类型
addRemoveLinks: true,
parallelUploads: 1, // 一次上传的文件数量
dictDefaultMessage: '拖动文件至此或者点击上传',
dictMaxFilesExceeded: "您最多只能上传 1 个文件!",
dictResponseError: '文件上传失败!',
dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
dictFallbackMessage: "浏览器不受支持",
dictFileTooBig: "文件过大上传文件最大支持",
dictRemoveLinks: "删除",
dictCancelUpload: "取消",
init: function() {
this.on("success", function(file,data) {
$("#path").val(data.fileName);
console.log("File " + file.name + "uploaded");
});
this.on("removedfile", function(file) {
console.log("File " + file.name + "removed");
});
}
});
</script>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)