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 filemaxFilesize: 2, // MBaccept: 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>
