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. 预编译And作用域链

    首先要理解什么是预编译: 预编译就是在JS执行前的一瞬间创建一个AO对象,这个创建AO的过程叫做预编译. console.log(a) var a = 1; function c(b){ b = 10 ...

  2. jenkins的理解及安装

    目录 一.理论概述 二.安装 一.理论概述 Jenkins的介绍 ​ Jenkins是一个基于MIT License协议的开源软件项目,是基于Java开发的一种持续集成(CI)工具,用于监控持续重复的 ...

  3. 元类编程--__get__ __set__属性描述符

    from datetime import date, datetime import numbers class IntField: #数据描述符,实现以下任意一个,都会变为属性描述符 def __g ...

  4. django内置缓存

    由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...

  5. Python的range和xrange

    range 函数说明:range([start,] stop[, step]),根据start与stop指定的范围以及step设定的步长,生成一个序列. range示例: >>> r ...

  6. 偶然发现的几个OPENWRT工具安装包

    https://rychly.gitlab.io/openwrt-packages/ 有心人已经打好包了,下载拿用 例如:dropbrute https://rychly.gitlab.io/open ...

  7. Linux：入门基础

    一.操作Linux必知必会基础知识 二.在Linux命令下查看命令帮助信息 三.Linux挂机重启注销命令 四.Linux显示系统IP地址 一.操作Linux必知必会基础知识 1.Linux命令行组成 ...

  8. 使用VisualGDB和OpenOCD调试STM32L0开发板

    本教程主要介绍如何配置VisualGDB和OpenOCD来调试STM32L0开发板的固件,使微控制器进入睡眠模式. 我们将创建一个NUCLEO-L031K6开发板的基本工程,并介绍当CPU进入休眠模式 ...

  9. k8s的容器编排

    1.K8S是如何对容器编排? 在K8S集群中,容器并非最小的单位,K8S集群中最小的调度单位是Pod,容器则被封装在Pod之中.由此可知,一个容器或多个容器可以同属于在一个Pod之中. 2.Pod是怎 ...

  10. MySQL进阶13--常见六大约束: 非空/默认/主键/唯一约束/检查约束/外键约束--表级约束 / 列级约束

    /* MySQL进阶13 常见六大约束: 1.not null 非空 2.default :默认值,用于保证该字段的默认值 ; 比如年龄:1900-10-10 3.primary key : 主键,用 ...