一次dropzone体验

对于前端，本人不是太擅长，对于当前的一些网上的样例，也许是习武悟性太差，不是太透，所以只能通过blog的方式记录下一些武功套路，便于以后查询使用

首先，我们需要知道这个武功适应的战场。

什么是dropzone？

DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库，它是轻量级的，不依赖任何其他类库（如JQuery）并且高度可定制.

支持浏览器：

Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
Safari 6+

对于所有其他浏览器 , dropzone 提供了一个 file input 作为应对策略，对于老旧的浏览器，会出现file input，还是可以文件上传的。

资源

官网：https://www.dropzonejs.com/

GitHub：https://github.com/enyo/dropzone

看demo:

dropzone.html

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- css 引用-->

    <link rel="stylesheet" type="text/css" th:href="@{~/static/css/basic.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{~/static/css/dropzone.min.css}"/>

    <!-- js 引用 -->

    <script th:src="@{~/static/js/jquery_3.1.0_jquery.min.js}"></script>

    <script th:src="@{~/static/js/dropzone.min.js}"></script>

</head>

<body>

<input type="text" value="TASK20190309" id="taskKey"/>

<div id="dropz" class="dropzone" style="width: 500px; height: 300px;"></div>

<!-- 文件上传缩略图模板 -->

<div id="preview-template" class="hide">

    <div class="dz-preview dz-file-preview">

        <div class="dz-image">

            <img data-dz-thumbnail="" />

        </div>

        <div class="dz-details">

            <div class="dz-size">

                <span data-dz-size=""></span>

            </div>

            <div class="dz-filename">

                <span data-dz-name=""></span>

            </div>

        </div>

        <div class="dz-error-message">

            <span data-dz-errormessage=""></span>

        </div>

        <div class="dz-success-mark">

            <span class="fa-stack fa-lg bigger-150">

                <i class="fa fa-circle fa-stack-2x white"></i>

                <i class="fa fa-check fa-stack-1x fa-inverse green"></i>

            </span>

        </div>

        <div class="dz-error-mark">

            <span class="fa-stack fa-lg bigger-150">

                <i class="fa fa-circle fa-stack-2x white"></i>

                <i class="fa fa-remove fa-stack-1x fa-inverse red"></i>

            </span>

        </div>

    </div>

</div>

<!--<div id="preview-template" style="display: none;">

    <div class="dz-preview dz-file-preview ">

        <div class="dz-image"><img data-dz-thumbnail /></div>

        <div class="dz-details">

            <div class="dz-filename"><span data-dz-name></span></div>

            <div class="dz-size" data-dz-size></div>

        </div>

        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>

        <div class="dz-success-mark"><span>✔</span></div>

        <div class="dz-error-mark"><span>✘</span></div>

        <div class="dz-error-message"><span data-dz-errormessage></span></div>

    </div>

</div>-->

</body>

<script th:inline="javascript">

    Dropzone.autoDiscover = false;//解决两次实例Dropzone错误，可在控制台看到该错误

    var $taskKey = $("#taskKey");

    try{

        var myDropzone = new Dropzone("#dropz",{

            url: "/uploadFile",//文件提交地址

            method:"post",  //也可用put

            paramName:"file", //默认为file

            maxFiles:2,//一次性上传的文件数量上限

            maxFilesize: 2, //文件大小，单位：MB

            acceptedFiles: ".jpg,.gif,.png,.jpeg", //上传的类型

            addRemoveLinks:true, //默认false。如果设为true，则会给文件添加一个删除链接

            uploadMultiple:true,//如果设为true，则相当于 HTML 表单添加 multiple 属性

            parallelUploads: 2,//一次上传的文件数量

            autoProcessQueue:true, //当设置 false 你必须自己像这样 myDropzone.processQueue()

            previewTemplate: $('#preview-template').html(),//如果去掉该选项就会使用默认的

            dictDefaultMessage :

                '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 拖拽文件到此处</span> \

                <span class="smaller-80 grey">(或点击下面的上传按钮选择待上传文件)</span> <br /> \

                <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'

            ,

            dictMaxFilesExceeded: "您最多只能上传{{maxFiles}}个文件！",

            dictResponseError: '文件上传失败!',

            dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",

            dictFallbackMessage:"浏览器不受支持",

            dictFileTooBig:"文件过大({{filesize}}MB). 上传文件最大支持: {{maxFilesize}}MB.",

            dictRemoveLinks: "删除",

            dictCancelUpload: "取消",

            dictRemoveFile: "移除",

            //文件信息预览

            thumbnail: function(file, dataUrl) {

                if (file.previewElement) {

                    $(file.previewElement).removeClass("dz-file-preview");

                    var images = $(file.previewElement).find("[data-dz-thumbnail]").each(function() {

                        var thumbnailElement = this;

                        thumbnailElement.alt = file.name;

                        thumbnailElement.src = dataUrl;

                    });

                    setTimeout(function() { $(file.previewElement).addClass("dz-image-preview"); }, 1);

                }

            },

            accept: function(file, done) {

                //此处可以在上传前添加一些校验

                var taskKey = $taskKey.val();

                if (taskKey === "" || taskKey == null) {

                    done("任务不为空");

                } else {done();}

            },

            init:function(){

                //添加文件触发

                this.on('addedfile',function(file){

                    console.log("addedfile .....");

                });

                this.on('successmultiple',function(files,reponse){

                    console.log("successmultiple .....");

                    $.each(files,function(index,file){

                        if(file.accepted){

                                if(reponse[file.name]!='0'){

                                    //表示后台处理失败

                                    var $div = $(file.previewElement);

                                    $div.removeClass("dz-success").addClass("dz-error");

                                    $div.find(".dz-error-message").find("span").text("上传失败");

                                }

                        }

                    });

                });

                this.on('sending',function(files, xhr, formData){

                    //此处可以添加自定义参数

                    formData.append("taskKey", $taskKey.val());

                });

                this.on('errormultiple',function(files,reponse){

                    console.log("errormultiple .....");

                    $.each(files,function(index,file){

                        if(file.accepted){

                            if(reponse[file.name]=='0'){

                                //表示后台处理成功

                                var $div = $(file.previewElement);

                                $div.removeClass("dz-error").addClass("dz-success");

                            }

                        }

                    });

                });

            }

        });

        //在以ajax模式离开此页面时删除dropzone实例

        $(document).one('ajaxloadstart.page', function(e) {

            try {

                myDropzone.destroy();

            } catch(e) {}

        });

    }catch (e) {

        alert('浏览版本过低，不支持文件上传!');

    }

</script>

</html>

后台：

package com.paic.phssp.springtest.dropzone;

import com.fasterxml.jackson.core.JsonProcessingException;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.mongodb.util.JSON;

import com.paic.phssp.springtest.dto.Student;

import com.rabbitmq.tools.json.JSONUtil;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.boot.autoconfigure.EnableAutoConfiguration;

import org.springframework.boot.json.JsonParser;

import org.springframework.http.HttpStatus;

import org.springframework.http.ResponseEntity;

import org.springframework.stereotype.Controller;

import org.springframework.util.MultiValueMap;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.annotation.Resource;

import javax.servlet.http.HttpServletRequest;

import java.io.File;

import java.io.IOException;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import java.util.UUID;

/**

 * 文件上传demo

 */

@Controller

@EnableAutoConfiguration

public class DropzoneController {

    private final Logger log = LoggerFactory.getLogger(getClass());

    @Resource

    private Student student;

    @RequestMapping("/dropzone")

    private String toDropzonePage() {

        System.out.println("Hello World.....");

        return "dropzone";

    }

    @RequestMapping("/uploadFile")

    private ResponseEntity<String> uploadFile(MultipartHttpServletRequest request) {

        log.info("start upload file ......");

        HttpStatus httpStatus = HttpStatus.INTERNAL_SERVER_ERROR;//status code 500

        Map<String, Object> loadResultMap = new HashMap<String, Object>();

        MultiValueMap<String, MultipartFile> multiMap = request.getMultiFileMap();

        String taskKey = request.getParameter("taskKey");

        log.info("taskKey = "+taskKey);

        String filePath = "F:\\test";

        //TODO 异常

        //int i = 9/0;

        for (Map.Entry<String, List<MultipartFile>> entry : multiMap.entrySet()) {

            List<MultipartFile> mFList = entry.getValue();

            for (MultipartFile mFile : mFList) {

                int loadResult = loadFile(mFile, filePath);

                String fileName = mFile.getOriginalFilename();

                loadResultMap.put(fileName, loadResult);

            }

        }

        //封装返回

        ObjectMapper objMapper = new ObjectMapper();

        String body = "";

        try {

            body = objMapper.writeValueAsString(loadResultMap);

            httpStatus = HttpStatus.OK;

        } catch (JsonProcessingException e) {

            log.error("load file error", e);

        } catch (Exception e) {

            log.error("load file error", e);

        }

        ResponseEntity responseEntity = new ResponseEntity(body, httpStatus);

        return responseEntity;

    }

    private int loadFile(MultipartFile mfile, String filePath) {

        log.error("load file param=", mfile.toString());

        int result = 1;

        // 获取上传的原始文件名

        String fileName = mfile.getOriginalFilename();

        //TODO 制造有失败上传场景

       /* if(fileName.equals("5a38b9ee3b7fb.jpg")){

            return result;

        }*/

        String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());

        // 判断并创建上传用的文件夹

        File file = new File(filePath);

        if (!file.exists()) {

            file.mkdir();

        }

        // 重新设置文件名为 UUID，以确保唯一

        file = new File(filePath, UUID.randomUUID() + fileSuffix);

        result = 0;

        try {

            // 写入文件

            mfile.transferTo(file);

        } catch (IOException e) {

            log.error("load file error", e);

        }

        return result;

    }

}

可能的报错：

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of xxx bytes.

解决方案：

#springBoot自带tomcat，Post请求参数默认限制1024，设置0就不限制大小了

server.tomcat.max-http-post-size=0

1）在配置文件（application.properties）加入如下代码，一般这个方法解决不了问题

multipart.maxFileSize = 10Mb

multipart.maxRequestSize=100Mb

2）把如下代码放在启动类上，并在类上加入@Configuration

@Bean

    public MultipartConfigElement multipartConfigElement() {

        MultipartConfigFactory factory = new MultipartConfigFactory();

        //  单个数据大小

        factory.setMaxFileSize(DataSize.ofMegabytes(2L));

        /// 总上传数据大小

        factory.setMaxRequestSize(DataSize.ofMegabytes(10L));

        return factory.createMultipartConfig();

    }

测试：

一次dropzone体验

（1）未写就异常失败了；//TODO 异常，放开

一次dropzone体验

（2）因为uploadMultiple=true(一次请求可{{parallelUploads}}文件)，成功与失败都有，//TODO 制造有失败上传场景，放开

一次dropzone体验

（3）成功，主要看下，前端file打印：

一次dropzone体验

参考：

https://blog.csdn.net/weixin_40119256/article/details/81843361

http://wxb.github.io/dropzonejs.com.zh-CN/

https://blog.csdn.net/qq_25446311/article/details/78600354

一次dropzone体验的更多相关文章

体验三大JavaScript文件上传库（Uppy&period;js/Filepond/Dropzone）
最近发现了一个高颜值的前端上传组件Uppy.js,立即上手体验了一波,感觉还不错.然后又看到同类型的Filepond以及Dropzone.js,对比体验了一下,感觉都很优秀,但是在体验过程中,都遇到了 ...
ASP&period;NET MVC中使用Dropzone&period;js实现图片的批量拖拽上传
说在前面最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
Android UI体验之全屏沉浸式透明状态栏效果
前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种身临其境的体 ...
移动端之Android开发的几种方式的初步体验
目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式开发环境是否需要AndroidSDK 支持跨平台开发语言&技能 MUI Win+ ...
TODO：小程序开发过程之体验者
TODO:小程序开发过程之体验者 1. 小程序开发过程,先下载开发者并安装开发者工具,现在腾讯开放测试了,普通用户也可以登录开发者工具,如图普通用户登录为调试类型,但是只能建立无AppID的项目如果 ...
微信小程序体验(2)：驴妈妈景区门票即买即游
驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...
一起学微软Power BI系列-使用技巧(3)Power BI安卓手机版安装与体验
Power BI有手机版,目前支持安卓,苹果和WP,不过没有WP手机,苹果在国内还不能用,要FQ和用就不测试了.安卓的我也也是费了九牛二虎之力才把app下载下来,把方法分享给大家. FQ太麻烦,所以建 ...
&period;NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

随机推荐

Redis 3&period;0 与 3&period;2 配置文件变化
一.Redis3.0 与 3.2 配置文件对比 1. clone redis git clone https://github.com/antirez/redis.git 2. checkout分支 ...
Spring官网下载dist&period;zip的几种方法
Spring官网下载dist.zip的几种方法 Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包, ...
python 模块加载
python 模块加载本文主要介绍python模块加载的过程. module的组成所有的module都是由对象和对象之间的关系组成. type和object python中所有的东西都是对象,分为 ...
RDIFramework&period;NET ━ &period;NET快速信息化系统开发框架钜献 V2&period;9 版本震撼发布
RDIFramework.NET ━ .NET快速信息化系统开发框架钜献 V2.9 版本震撼发布全新体验.全新感觉.2015钜献! 继上个版本“RDIFramework.NET V2.8版本发布”5 ...
浅析C&num;深拷贝与浅拷贝（转）
1.深拷贝与浅拷贝拷贝即是通常所说的复制(Copy)或克隆(Clone),对象的拷贝也就是从现有对象复制一个“一模一样”的新对象出来.虽然都是复制对象,但是不同的复制方法,复制出来的新对象却并 ...
JProfiler入门笔记
看链接:http://blog.csdn.net/chendc201/article/details/22897999 收集一下.
树莓派3上安装Qt5
按照在2上的安装只安装了qt4,实际上qt5已经可以直接apt方式可以获取到树莓派上了. install qt5-default and qtcreator:$ sudo apt-get instal ...
Windows消息大全
最近在写TabControl的用户控件,需要用到sendMessage,已做备份. 引用:http://bbs.aau.cn/forum.php?mod=viewthread&tid=7776 ...
Java数据库连接--JDBC基础知识(操作数据库：增删改查)
一.JDBC简介 JDBC是连接java应用程序和数据库之间的桥梁. 什么是JDBC? Java语言访问数据库的一种规范,是一套API. JDBC (Java Database Connectivit ...
九度oj 1034 寻找大富翁 2009年浙江大学计算机及软件工程研究生机试真题
题目1034:寻找大富翁时间限制:1 秒内存限制:32 兆特殊判题:否提交:5323 解决:2123 题目描述: 浙江桐乡乌镇共有n个人,请找出该镇上的前m个大富翁. 输入: ...