README

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

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

在开始对Dropzone进行工作之前，请阅读贡献指南。

>> 下载 <<

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

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

主要功能

图像缩略图预览。只需注册回调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); });

有关所有事件的列表，请参阅文档中的“事件”章节»事件«或源代码中的此处。

浏览器支持

Chrome 7+
Firefox 4+
IE 10+
Opera 12+ (由于MacOS上的版本12 API存在bug，已禁用)
Safari 6+

对于所有其他浏览器，dropzone提供旧式文件输入回退。

为什么还需要另一个库？

我意识到已经有许多其他库存在，但我决定自己编写的原因如下：

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

MIT许可证

查看LICENSE文件

heimrichhannot / dropzone-latest

维护者

详细信息