java利用dropzone多文件上传

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

java利用dropzone多文件上传案例效果图

• html页面

使用dropzone的典型方式是通过创建一个 class 属性中包含 dropzone的form表单元素

<form action="#" class="dropzone dropzone-file-area" id="my-dropzone" enctype="multipart/form-data" method="post">
    <span >
        <i class="fa fa-upload"></i>
        <font style="color: red">点击框内空白区域进行上传</font>
    </span>
</form>
<button  class="login-button" onclick="uploadAllFile();" style="margin-top: 5px;">確認全部上傳</button>

• 引入dropzone.min.css样式

<link rel="stylesheet" type="text/css" href="${webAppPath}/static/comp/dropzone/basic.min.css">
<link rel="stylesheet" type="text/css" href="${webAppPath}/static/comp/dropzone/dropzone.min.css">

额外新加的css样式

<style>
        .login-button { /* 按钮美化 */
            width: 270px; /* 宽度 */
            height: 40px; /* 高度 */
            border-width: 0px; /* 边框宽度 */
            border-radius: 3px; /* 边框半径 */
            background: #1E90FF; /* 背景颜色 */
            cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
            outline: none; /* 不显示轮廓线 */
            font-family: Microsoft YaHei; /* 设置字体 */
            color: white; /* 字体颜色 */
            font-size: 17px; /* 字体大小 */
        }
        .login-button:hover { /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }
    </style>

• 下载并引入dropzone.js

<script type="text/javascript" src="${webAppPath}/static/comp/dropzone/dropzone.min.js"></script>

 

初始化dropzone控件

功能选项

url：最重要的参数，指明了文件提交到哪个页面。 
method：默认为post，如果需要，可以改为put。 
paramName：相当于元素的name属性，默认为file。 
maxFilesize：最大文件大小，单位是 MB。 
maxFiles：默认为n