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

请参阅常见问题解答。

示例

有关示例，请参阅 GitHub wiki。

使用

隐式创建

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

就是这样！

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 */ });

请注意，拖放区域不一定是表单。但如果您选择其他元素，您必须在选项中传递 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); });

有关所有活动的列表，请参阅文档中的“»事件«”章节（http://www.dropzonejs.com/#events）或查看源代码（https://github.com/heimrichhannot/dropzone/blob/HEAD/src/dropzone.coffee#L43）。

浏览器支持

Chrome 7+
Firefox 4+
IE 10+
Opera 12+（MacOS版本12已禁用，因为他们的API有bug）
Safari 6+

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

为什么还需要另一个库？

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

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

MIT许可

请参阅LICENSE文件

heimrichhannot / dropzone

维护者

详细信息