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>

github地址 ： https://github.com/lick468/fastdfs_demo

分布式文件上传 spring boot + fastdfs + dropzone的更多相关文章

  1. 我心中的核心组件（可插拔的AOP）~分布式文件上传组件~基于FastDFS

    回到目录 一些概念 在大叔框架里总觉得缺点什么,在最近的项目开发中,终于知道缺什么了,分布式文件存储组件,就是缺它,呵呵,对于分布式文件存储来说,业界比较公认的是FastDFS组件,它自己本身就是集群 ...

  2. spring boot:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)

    一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...

  3. Ajax实现文件上传(Spring MVC)

    ## 前端表单 和 JQuery jsp/html代码 使用JQuery <script src="static/js/jquery-3.4.1.js"></sc ...

  4. ajax实现文件上传，多文件上传，追加参数

    1.html部分实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  5. Spring Boot 文件上传原理

    首先我们要知道什么是Spring Boot,这里简单说一下,Spring Boot可以看作是一个框架中的框架--->集成了各种框架,像security.jpa.data.cloud等等,它无须关 ...

  6. 从.Net到Java学习第十篇——Spring Boot文件上传和下载

    从.Net到Java学习系列目录 图片上传 Spring Boot中的文件上传就是Spring MVC中的文件上传,将其集成进来了. 在模板目录创建一个新的页面 profile/uploadPage. ...

  7. spring mvc文件上传(单个文件上传|多个文件上传)

    单个文件上传spring mvc 实现文件上传需要引入两个必须的jar包    1.所需jar包:                commons-fileupload-1.3.1.jar       ...

  8. 文件上传和下载（可批量上传）——Spring（二）

    针对SpringMVC的文件上传和下载.下载用之前“文件上传和下载——基础(一)”的依然可以,但是上传功能要修改,这是因为springMVC 都为我们封装好成自己的文件对象了,转换的过程就在我们所配置 ...

  9. FastDFS的配置、部署与API使用解读（8）FastDFS多种文件上传接口详解（转）

    1.StorageClient与StorageClient1的区别 相信使用happy_fish的FastDFS的童鞋们,一定都熟悉StorageClient了,或者你熟悉的是StorageClien ...

随机推荐

  1. 阿里云给自己实例扩容-扩展分区和文件系统_Linux系统盘

    阿里云买了台服务器ecs 磁盘容量40g 发现已经用了30g了  赶紧扩容 进入 e'cs实例 进入左边菜单 存储与快照 然后选择右边的扩容 然后支付 成功后 进入服务器 df -h 发现怎么还是没变 ...

  2. iveiw DatePicker 只能选择本月之前的日期，本月包括之后都不能选择

    日期判断只能选择本月之前的日期 <DatePicker type="date" :options="options3" format="yyyy ...

  3. Mysql安装与问题合集

    下载mysql https://dev.mysql.com/downloads/mysql/ 下载历史版本 看这篇文章 https://www.cnblogs.com/reyinever/p/8551 ...

  4. 爬虫：selenium请求库

    一.介绍 二.安装 三.基本使用 四.选择器 五.等待元素被加载 六.元素交互操作 七.其他 八.项目练习 一.介绍 # selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requ ...

  5. Nginx- web服务配置与测试

    (一) 软件介绍由俄罗斯人lgor Sysove开发,为开源软件.支持高并发:支持几万并发连接(特别是静态小文件业务环境) 资源消耗少:在3万并发连接下开启10个Nginx线程消耗内存不到200M 支 ...

  6. PAT基础级-钻石段位样卷2-7-5 福到了 (15 分)

    “福”字倒着贴,寓意“福到”.不论到底算不算民俗,本题且请你编写程序,把各种汉字倒过来输出.这里要处理的每个汉字是由一个 N × N 的网格组成的,网格中的元素或者为字符 @ 或者为空格.而倒过来的汉 ...

  7. MySQL 是怎样运行的：从根儿上理解 MySQL：字符集和比较规则

    本文章借鉴自https://juejin.im/book/5bffcbc9f265da614b11b731 字符集和比较规则简介 一些重要的字符集 ASCII字符集 共收录128个字符,包括空格.标点 ...

  8. Luogu P1892 团伙

    Luogu P1892 团伙 这是道很简单的并查集-- 不,它并不简单. 这道题考了一个叫做反集的东西. 也就是说: 如果$a$和$b$是敌人,合并$n+b$和$a$,$n+a$和$b$: 如果$c$ ...

  9. 1121 Django操作

    目录 Django前戏 一.课程导读 1.web应用 2.c/s b/s 架构 3.Python Web框架 二.原生socket服务 三.http协议 什么是http协议 四大特性 http工作原理 ...

  10. JSOI2012 玄武密码 和 HDU2222 Keywords Search

    玄武密码 给若干模式串和一个文本串.求每个模式串在文本串上能匹配的最大前缀长度. N<=10^7,M<=10^5,每一段文字的长度<=100. jklover的题解 将模式串建成一个 ...