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. 分布式session的几种实现方式

    在搭建完集群环境后,不得不考虑的一个问题就是用户访问产生的session如何处理.如果不做任何处理的话,用户将出现频繁登录的现象,比如集群中存在A.B两台服务器,用户在第一次访问网站时,Nginx通过 ...

  2. rhel7下安装EPEL源

    1.rhel7安装aliyun下的epel源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo

  3. 算法笔试过程中的几个输入输出python语句

    title: python在线笔试学习笔记 localimage: image1 urlname: writenexam categories: summary tags: [writen, exam ...

  4. KubeEdge，一个Kubernetes原生边缘计算框架

    ​KubeEdge成为第一个Kubernetes原生边缘计算平台,Edge和云组件现已开源! 开源边缘计算正在经历其业界最具活力的发展阶段.如此多的开源平台,如此多的整合以及如此多的标准化举措!这显示 ...

  5. 算法102----360笔试（m进制不进位相加最大值）

    转自:https://blog.csdn.net/qq_18310041/article/details/99656445 import copy # m进制 m = 5 n = 5 line = [ ...

  6. C++11新特性之operator "" xxx(const char *, size_t n)

    从C++11开始,我们可以使用以下形式通过常量字符串构造自定义类型, 比如: class Person { public: Person(const std::string& name): _ ...

  7. python装饰器,迭代器,生成器,协程

    python装饰器[1] 首先先明白以下两点 #嵌套函数 def out1(): def inner1(): print(1234) inner1()#当没有加入inner时out()不会打印输出12 ...

  8. 05-Docker私有仓库

    一.介绍私有仓库顾名思义,如果我们不想把docker镜像公开放到公有仓库中,只想在部门或团队内部共享docker镜像,这时私有仓库就来了. 二.私有仓库搭建与配置1.拉取私有仓库镜像,这里说明一下,私 ...

  9. Mybatis之foreach批量插入

    1接口 public boolean insertMembersBatch(@Param("memberList") List<Members> members); @ ...

  10. 带有EXE参数的启动

    (一).先制作一个带启动参数的EXE文件. 步骤:            1.定义全局私有变量:private string[] s = new string[1];  //这里为了简单起见,只做一个 ...