README

Dropzone.js 是一个轻量级的 JavaScript 库，可以将 HTML 元素转换为拖放区域。这意味着用户可以将文件拖放到该元素上，并通过 AJAX 将文件上传到服务器。

如果您需要支持，请使用带有 dropzone.js 标签的 stackoverflow，而不是 GitHub 问题跟踪器。只有当您认为您发现了一个错误或有一个功能请求时，才在此发布问题。

在开始为 Dropzone 工作！之前，请阅读贡献指南。

>> 下载 <<

从 2.0.0 版本开始，此库不再依赖于 jQuery（但它仍然可以作为 jQuery 模块工作）。

Dropzone 与 component 兼容，有独立版本和与 AMD 兼容的模块，可在下载文件夹中找到，兼容 RequireJS。

主要功能

图像缩略图预览。只需注册回调 thumbnail(file, data) 并在您喜欢的位置显示图像即可
支持 Retina
多文件和同步上传
进度更新
支持大文件
完整主题。Dropzone 的外观和感觉只是默认主题。您可以通过覆盖默认事件监听器来自定义一切。
经过良好测试

文档

有关完整文档和安装信息，请访问 www.dropzonejs.com

请参阅 FAQ。

示例

有关示例，请参阅 GitHub wiki。

用法

隐式创建

<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>

就是这样！真的！

Dropzone 将自动附加到它，并处理文件拖放。

想要更多控制？您可以像这样配置 dropzone

// "myAwesomeDropzone" is the camelized version of the ID of your HTML element
Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };

...或者像这样手动实例化 dropzone

new Dropzone("div#my-dropzone", { /* options */ });

请注意，dropzone 不一定是表单。但如果你选择另一个元素，你必须将 url 参数传递到选项中。

有关配置选项，请参阅网站上的文档或源代码。

注册事件

如果您想注册某个活动，可以在 dropzone 对象本身上进行操作。

Dropzone.options.myDropzone({
  init: function() {
    this.on("error", function(file, message) { alert(message); });
  }
});
// or if you need to access a Dropzone somewhere else:
var myDropzone = Dropzone.forElement("div#my-dropzone");
myDropzone.on("error", function(file, message) { alert(message); });

要查看所有活动的列表，请参阅文档中的“事件”章节，或在源代码中查看。

浏览器支持

Chrome 7+
Firefox 4+
IE 10+
Opera 12+（MacOS的12版本已禁用，因为它们的API存在错误）
Safari 6+

对于其他所有浏览器，dropzone提供了一个传统的文件输入回退。

为什么还需要另一个库？

我明白已经有一些库存在，但我决定编写自己的原因如下：

我不想让它太大，也不希望它过于复杂。
我想设计自己的元素。我只希望注册回调，以便相应地更新我的元素。
大文件应该可以无问题上传。
我希望有一个用于预览图像的回调，这样在查看太多或太大的图像时不会杀死浏览器。
我想使用浏览器最新的API。我不在乎如果浏览器太旧，它会回退到正常的上传表单。
我认为现在不再需要依赖像jQuery这样的库（尤其是当提供的功能在旧浏览器中本来就不存在时）。

MIT许可证

参阅LICENSE文件

heimrichhannot / dropzone4

维护者

详细信息