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. android 动画总结一

    一.补间动画 补间动画就是指开发者指定动画的开始.动画的结束的"关键帧",而动画变化的"中间帧"由系统计算,并补齐. 补间动画分为四种:平移动画(Transla ...

  2. java网络编程--httpurlconnection

    HttpURLConnection是基于HTTP协议的,其底层通过socket通信实现.如果不设置超时(timeout),在网络异常的情况下,可能会导致程序僵死而不继续往下执行.可以通过以下两个语句来 ...

  3. 支付宝APP支付(基于Java实现支付宝APP支付)

    贴一下支付核心代码,以供后续参考: 业务层 import com.alipay.api.AlipayApiException; import com.alipay.api.AlipayClient; ...

  4. Android笔记（三十一）Android中线程之间的通信（三）子线程给主线程发送消息

    先看简单示例:点击按钮,2s之后,TextView改变内容. package cn.lixyz.handlertest; import android.app.Activity; import and ...

  5. Gitlab CI/CD任务一直处于pending

    在注册Runner时候这里输入了tag,这里指的是runner的标签,可以设置多个  ,分别用 ,号分割 .gitlab-ci.yml文件中 stages: - pull - package - bu ...

  6. 应用在Windows系统中的自动化部署实践

    因为公司的产品有linux 和windows两套部署环境,领导安排我先来做windows的自动化部署.由于本人对windows 的dos命令基本没啥概念,所以在最终完成之前,走了很多弯路,在这里记载下 ...

  7. jade成段的文本和标签

    如果文本是大段的文本怎么写呢?因为文本会换行,比如有多行的文本,标签,文本傻傻分不清楚 p 1234567890 => <p>1234567890</p> 如果需要换行, ...

  8. python requests包的基本使用

    Requests 安装requests模块: D:\Install\Python36>pip3 install requests 请求方式 #coding:utf-8 import reques ...

  9. Java对象内存分配原理与布局

    当一个对象被创建了,那在JVM中是如何的从一个对象不存在到存到,然后将对象存放在什么地方呢?这次主要来探讨一下Java对象创建的过程. new关键字创建对象的3个步骤: 1.在堆内存中创建出对象的实例 ...

  10. ArcGIS + Python 批量裁剪、添加X/Y坐标脚本

    前言 前一段时间,同事拿来的数据范围太大,用不了那么多(只需要一个乡镇的,结果拿来区县的),太多了加载也是问题.所以就让我给处理下. 由于文件较多,手动裁剪的话,我一个一个用ArcGIS工具箱中的工具 ...