官网地址：http://www.dropzonejs.com/
一，它是什么：
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
它是一个开源的带图片预览的可拖拽上传图片的插件。
它具有轻量、不依赖其他库（诸如jQuery）的特点，同时很方便自定义。
二，简单使用：
这里之所以引用了jQuery并不是因为这个插件依赖jQuery，而是因为后文使用的语法，有一些是基于jQuery的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="dist/dropzone.css" />
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="dist/dropzone.js"></script>
</head>
<body>
<div class="dropzone" id="myDropzone">
<div class="am-text-success dz-message">
将文件拖拽到此处<br>或点此打开文件管理器选择文件
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#myDropzone", {
url: "127.0.0.1",
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>
</body>
</html>
这样，一个基础的基于Dropzone的文件拖拽上传就完成了。我对这段代码的理解是，这里的拖拽上传，拖拽和上传是连在一起的，拖拽完成，插件会自动上传文件到你指定的URL中。
例子中，我们使用的是非文件域输入框，如果使用type=file类型的input，则可以
而实际场景中，也有一些场合是需要这两个步骤分开完成的，也就是说，拖拽只是把文件放到规定区域内，当单击了上传按钮后，才真的上传文件。这样可以避免用户频繁更换图片而导致的频繁请求。
也有一些场景，上传图片的同时，我们还需要一起提交一些额外的其他数据，比如用户标识等等。因为我们需要区别不同用户上传的照片，也许需要把它们分开处理。
如果使用Dropzone，这两种情况分别该怎么处理呢？
先说第一种，有一种情况下，图片是被转化成二进制数据后上传的。我们假设这里的情况，就是这样，那么，我们希望，用户在单击或者拖拽时，先得到图片的二进制数据，但是，不要上传，当用户单击提交时，再讲这些内容发送到URL中，进行存储。单击之前，每次用户改变图片，本地的二进制数据也随之改变。那么，Dropzone有没有这个机制呢，将获取文件和上传文件分开操作？目前思路是，它有两个方法，分别管理这两个过程，我们可以在方法里进行处理，待查询。
再说第二种，上传图片数据的同时，要附加上传图片上传者的相关信息，-也就是说上传图片的同时，需要提交一些额外的数据。formdata可以通过append添加数据这是一种思路，待验证。
题外话：经常使用图片上传，但是很少仔细的想过图片上传的逻辑。总是以为用户单击上传了，整个过程就完成了。所以，很多东西总是想不通。通过总结Dropzone的使用，顺带也把图片上传逻辑简单理了下。下面，从用户开始上传，一直到下一次用户端调用，做个简单的流程说明：
1.用户通过拖拽或者单击等把图片放到上传框中
2.图片被发送到后台，存储在特定区域，一般情况下，还会系统的生成唯一名称。这个时候，只是图片被重命名后存到了某个存储区里面，它并不能够在数据库中被找到，因为数据库中没有它的相关信息。
3.（一般是通过用户单击提交等操作）图片信息以及其他相关信息，一起被提交到后台，存入数据库。此时，图片的信息才可以通过种种条件筛选等，被查询到，进而被使用。
4.在前端需要调取用户已经上传的图片时，后端从数据库读出图片信息（路径等可以找到图片的信息），前端还原到页面image元素的src属性中。
5.后台图片存储区的图片，显示在页面上。
原文地址：https://www.cnblogs.com/benxiaohai-microcosm/p/8509239.html