dropzone
Dropzone是一个提供文件拖拽上传并且提供图片预览的开源类库，使用Dropzone可以很方便的在网页上实现文件的拖拽上传。
下载
想要使用dropzone需要先下载对应的js文件，地址为：https://gitlab.com/meno/dropzone/-/jobs/87125172/artifacts/raw/dist/dropzone.js
不过想要使用dropzone的样式还得下载对应的css文件：https://gitlab.com/meno/dropzone/builds/artifacts/master/download?job=release
使用
基本使用
最简单的使用方式就是写一个form标签，只要给这个form标签加上一个名称为"dropzone"的class即可，再加载时dropzone会找到所有class为dropzone的form标签，然后将自己依附上去，然后就可以拖拽文件到该区域了，而且可以回显图片。
如下所示就是一个最简单的使用例子
<!DOCTYPE html> <html> <head> <title>dropzone测试</title> <script type="text/javascript" src="./dropzone.min.js"></script> <link rel="stylesheet" type="text/css" href="./dropzone.min.css"> </head> <body> <form action="/file-upload" class="dropzone"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> </body> </html>
使用效果如图
Create dropzones programmatically
当然，甚至还可以不用form标签而使用div标签创建拖拽区域
如下所示
<!DOCTYPE html>
<html>
<head>
<title>dropzone测试</title>
<script type="text/javascript" src="./dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="./dropzone.min.css">
<style type="text/css">
#dropzone_test {
width: 300px;
height: 300px;
background-color: #f90;
}
</style>
</head>
<body>
<div id="dropzone_test" class=dropzone></div>
<script type="text/javascript">
var myDropzone = new Dropzone("div#dropzone_test", {url: "/file/upload"});
</script>
</body>
</html>
效果图
如果使用了jquery还可以这样
$("div#myId").dropzone({ url: "/file/post" });
配置Dropzone
有两种方式可以配置dropzone元素
比较明显的一种方式就是通过操作实例化dropzone时生成的对象
但是如果你只是再HTML元素上面添加了一个dropzone的class而不是在js中实例化dropzone，那么你就没有对象可以操作，这时需要一个储存配置的地方让Dropzone知道应该怎样在初始化这些dropzone时配置它们，这个地方就是 Dropzone.options 对象。
// "myAwesomeDropzone" 是对应的HTML元素的ID的驼峰化
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // 上传到后台时图片参数的名字
maxFilesize: 2, // 最大上传大小，单位MB
accept: function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
}
else { done(); }
}
};
参数设置
| 参数 | 描述 |
|---|---|
|
|
当没有使用form标签或者form标签没有指定action时就要使用该参数，决定了文件上传到后台的地址，也可以通过提供一个叫做files的方法，必须返回url |
|
|
表示上传到后台的方法，必要时可以修改为"put"，也可以通过提供一个叫做files的方法，必须返回method |
|
|
设置上传超时时间 |
|
|
设置同时上传多少个文件 |
|
|
是否在一个请求中发送多个文件，而且对应的input也需要设置multiple属性 |
|
|
最大上传文件大小，单位MB |
|
|
上传时的参数名字，如果设置了uploadMultiple为true，然后Dropzone会将该名称添加到[]中 |
|
|
还没有上传文件时上传文件区域的提示信息 |
|
|
规定允许上传的文件格式，例如：".jpg, .jpeg, .png, .zip, .rar, .tar" |
|
|
是否自动上传文件 |
| 方法 | |
init |
当文件传送完成后接收后台的参数并执行 init() {
this.on("success", (file, response) => {
});
},
|
浙公网安备 33010602011771号