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. Eclipse-错误集

    1.The origin server did not find a current representation for the target resource or is not willing ...

  2. DbTemplate

    package com.me.dbComponent; import java.sql.Connection; import java.sql.PreparedStatement; import ja ...

  3. Codeforces Round #512 (Div. 2) D. Vasya and Triangle（几何+思维）

    题目 题意: 给出 n,m,k ,让你在长为 n,宽为 m 的坐标系里构建一个三角形,使得面积= n*m/k.如果存在,输出“YES”,输出三角形三个顶点的坐标:  如果不存在,输出“NO”. 思路: ...

  4. 2. kafka

    目录: 1.kafka概念 2.kafka使用场景 3.相关术语 4.原理解析 5.项目实战 一. kafka是什么 https://www.jianshu.com/p/014af2b34159 Ka ...

  5. Jmeter性能测试NoHttpResponseException (the target server failed to respond)

    采用JMeter做Http性能测试时,在高并发请求的情况下,服务器端并无异常,但是Jmeter端报错NoHttpResponseException (the target server failed ...

  6. 【转】SENDING KEY VALUE MESSAGES WITH THE KAFKA CONSOLE PRODUCER

    SENDING KEY VALUE MESSAGES WITH THE KAFKA CONSOLE PRODUCER When working with Kafka you might find yo ...

  7. ASP.NET 下配置请求大小、请求时间等参数

    在邮件发送系统或者其他一些传送文件的网站中,用户传送文件的大小是有限制的,因为这样不但可以节省服务器的空间,还可以提高传送文件的速度.下面介绍如何在Web.Config文件中配置限制上传文件大小与时间 ...

  8. 集成百度编辑器 ueditor 后端配置项没有正常加载,上传插件不能正常使用!

    项目要用到编辑器,于是集成了ueditor,集成ok,但一直显示 ‘’后端配置项没有正常加载,上传插件不能正常使用!‘’ 各种查: 网上说的无非就是那么集中情况 1. 因为百度官方的问题,php/co ...

  9. js for/in循环及其它

    for in 循环不仅可以遍历对象的属性,还可以遍历数组. Js 中为数组提供了多种遍历方式 const ary = ['a', 'b', 'c']; // 最基本的方式, 只能遍历下标有序递增的数组 ...

  10. [hdoj6483][莫队+线段树/ST]

    A Sequence Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...