介绍
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库, 零依赖且高度可定制
官网和Github
官方文档：https://www.dropzonejs.com/
中文版本：http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/#installation
Github: https://github.com/enyo/dropzone/
下载和安装
https://raw.githubusercontent.com/enyo/dropzone/master/dist/dropzone.js
引入到我们的页面
<script src="./path/to/dropzone.js"></script>这是官网Demo的效果, 如果你也想用到这样的效果, 可以直接到源码包的dist文件夹下样式拷贝过来。
Dropzone 不会处理你上传到服务器上面的文件. 你必须自己编写代码实现接收和保存上传的文件。
如何使用?
我们只需要创建一个class类名是dropzone的form表单元素：
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>Dropzone将查找所有的 class 属性中包含 dropzone 的表单元素, 就是这么简单, 这些上传文件将被正常处理就像这里是一段像下面这样的HTML代码:
<input type="file" name="file" />程序化方式创建 dropzones
不是必须在form上, 你也可以通过js代码初始化一个dropzone实例
// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});或者假如你用到了jquery也可以这样写
// jQuery
$("div#myId").dropzone({ url: "/file/post" });配置
有两种方式配置 dropzones.
一种就是和之前创建表单一样
另一种是通过js代码实现, 如下
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
}
else { done(); }
}
};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./dropzone/basic.css" />
<link rel="stylesheet" href="./dropzone/dropzone.css" />
<script src="./dropzone/dropzone.js"></script>
</head>
<body>
<form action="" class="dropzone" id="my-awesome-dropzone"></form>
</body>
<script type="text/javascript">
//拖拽上传文件
Dropzone.autoDiscover = true;
var myDropzone = new Dropzone(".dropzone", {
url: "fileList.php",
addRemoveLinks: true,
method: 'post',
filesizeBase: 1024,
sending: function(file, xhr, formData) {
formData.append("filesize", file.size);
},
success: function(file, response, e) {
var res = JSON.parse(response);
if (res.error) {
$(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')
}
}
});
</script>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)