Dropzone.js是一个开源的JavaScript库，提供AJAX异步文件上传功能，支持拖拽文件，支持设置文件类型，支持预览上传结果，不依赖jQuery库。

效果演示源代码下载

使用拖放区

我们可以创建一个正式的上传表单，并给表单一个。下降区。

表单ID=' my Dropzone ' action='/upload . PHP ' class=' Dropzone '/表单这样，Dropzone就会自动找到的表单元素。dropzone，并通过action属性将其上传到后台接收文件的程序，例如upload.php，就像接受一个非常常见的文件输入表单3360一样。

输入类型='文件'名称='文件'/然后，在你的upload.php写上传代码。Dropzone官网只下载js代码，没有后台上传代码。然而，helloweba.com提供了完整的php版本的上传示例代码。欢迎下载源代码。

下一步是引入dropzone.js

脚本src=' http : drozone . min . js '/脚本，然后什么都不做，打开浏览器，测试拖拽上传的效果。当然，您可以编写自己的风格或参考我们的示例代码。

在另一种情况下，我们不想在上传的html中有表单，所以我们只需要在html中放一个div#mydropzone。

div id=' my drop zone ' class=' drop zone '/div然后，配置js调用：

var MyDropzone=new Dropzone(' div # MyDropzone '，{ URL : ' upload . PHP ' })；如果您正在使用jquery，jQuery版本可以如下调用：

$ ('# dropz ')。drop zone({ URL : ' upload . PHP ' })运行你的网页，你也能看到上传效果吗？

配置拖放区

Dropzone的特点是它的灵活性，提供了很多选项、事件等等。以下是Dropzone的一些常用配置项目。

Url:最重要的参数，指示文件提交到哪个页面。

方法：默认为post，必要时可以改为put。

ParamName:相当于输入元素的Name属性，默认值为file。

最大文件大小：以兆字节为单位的最大文件大小。

MaxFiles:默认为null，可以指定为数值来限制文件的最大数量。

AddRemoveLinks:默认值为false。如果设置为true，将向文件中添加删除链接。

AcceptedFiles:表示允许上传的文件类型，格式为逗号分隔的MIME类型或扩展名。示例：image/*，application/pdf，PSD，目标文件

UploadMultiple:表示是否允许Dropzone一次提交多个文件。默认值为false。如果设置为真，相当于给HTML表单添加了多个属性。

标头：如果设置，它将作为额外的标头信息发送到服务器。示例：{“自定义标题”:“值”}

init:Dropzone初始化时调用的函数，可以用来添加自己的事件监听器。

ForceFallback:Fallback是一种在浏览器不支持此插件时提供替代方案的机制。默认值为false。如果设置为true，则强制回退。

回退：如果浏览器不支持此插件，则调用的函数。

以上是边肖介绍的Dropzone.js拖拽上传文件的实现，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！