一次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();

    }

测试：

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

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

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

参考：

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.js/Filepond/Dropzone）
最近发现了一个高颜值的前端上传组件Uppy.js,立即上手体验了一波,感觉还不错.然后又看到同类型的Filepond以及Dropzone.js,对比体验了一下,感觉都很优秀,但是在体验过程中,都遇到了 ...
ASP.NET MVC中使用Dropzone.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太麻烦,所以建 ...
.NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验
不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...
Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验
Mac OS 虚拟机安装方法最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

随机推荐

libopencv_shape.so.3.0: cannot open shared object file: No such file or directory 解决笔记
进入目录:/etc/ld.so.conf.d 创建:opencv.conf 添加:/opt/opencv-3.0.0/build/lib 执行:ldconfig DETAIL: (1)ldd dlsd ...
day24,25组合封装多态
面向对象的精髓:将数据和处理数据的代码绑定成一个对象只要获取到对象相应的数据和方法都有了一.组合什么叫组合? 多个对象放在一起叫组合组合的作用也是降低代码的冗余 # 学生会增加各种各样的新的属 ...
Ping 不通的原因分析
背景简介 ping是常用的网络管理命令,ping也属于一个通信协议,是TCP/IP协议的一部分,适用于windows和linux以及unix 根据reply用来检查网络是否通畅&网络连接的速 ...
C# 给类做事件的一般做法
https://docs.microsoft.com/zh-cn/dotnet/standard/events/how-to-raise-and-consume-events 第一个示例演示如何引发和 ...
shell 编程中的知识点 - 突然一下子就明白很多东西了
按自己的意愿生活, 而且是::: 要敢于按自己的意志去活! 那是一种胆量和勇气!! shell中的结构, 只有选择(实际上if条件也是一种选择结构)和循环, 都是用关键字来替代大括号的. 如: if ...
MySQL 5.7的原生JSON数据类型使用
新增测试用表: CREATE TABLE lnmp ( `id` ) unsigned NOT NULL AUTO_INCREMENT, `category` JSON, `tags` JSON, P ...
wqCms6.0在IIS6的Getshell
2017-02-15发布一.漏洞利用点漏洞文件:admin_UploadDataHandler.ashx 自定义构造上传点二.hack it 三.POC <html> <bod ...
oracle单行函数之通用函数
NVL()函数,处理null. Decode()函数,:多数值判断 Decode(数值 \ 列,判断值1,显示值1,判断值2,显示值2)若是判断值不包含的,则显示为空 Decode()函数非常类似程序 ...
17秋 SDN课程第四次上机作业
1.建立以下拓扑,并连接上ODL控制器. 2.利用ODL下发流表,使得h3在10s内ping不通h1,10s后恢复. 3.借助Postman通过ODL的北向接口下发流表,再利用ODL北向接口查看已下发 ...
python基础实践 -python是一门动态解释性的强类型定义语言
python是一门动态解释性的强类型定义语言 Python能做什么? Python是一门综合性的语言,你几乎能在计算机上通过Python做任何事情,以下是Python应该最广泛的几个方面: 1.网络应 ...

一次dropzone体验

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

随机推荐

热门专题