dropzonejs vue 使用_DropzoneJS 使用指南

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

安装

你可能只需要看看简单的 例子 ( 源代码 )就能开始了。然后继续阅读下面的一步步的指示和不同的安装方法。

下载独立的 dropzone.js 文件。然后这样引入到html中：

Dropzone 现在激活和可用,通过 window.Dropzone 就可以使用了。

Dropzone不处理你的文件上传在服务器上。你必须自己实现代码接收和存储文件。有关更多信息,请参见部分 服务器端实现 。

完成上面的操作就可以使用 Dropzone ，但是如果你想让它你上传的样式看起来像 官方 页面那样,你需要将下载的dropzones里面的cs发到你的文件夹中并引入。

With component

如果你使用 component ,你只需添加dropzone依赖：

"enyo/dropzone": "*"

然后这样引入：

var Dropzone = require("dropzone");

现在它已激活，并可以在页面中使用。

基本的CSS样式也包含在组件中，如果你想让它你上传的样式看起来像 官方 页面那样,你需要将下载的dropzones里面的cs发到你的文件夹中并引入。

With RequireJS

Dropzone 同样为 RequireJS 提供了 AMD 模块。

使用

使用 dropzone 的典型的方式是通过创建一个表单包含与 class="dropzone" :

就像这样。dropzone 会通过 class 为 dropzone 找到所有的表单元素，并自动将这些元素初始化，然后点击 input 选择文件(或拖拽)之后会根据 action 指定的地址上传文件。(其实就和普通的文件上传没什么区别，只不过多了个拖拽)

如果你想在后端接受文件的时候用其他的 name 而不是上面指定的 file ，您可以配置dropzone的 paramName 的选项。

如果你是使用 component 形式，别忘了 require("dropzone"); ,否则是不会生效的。

如果是使用form表单，完成上面的设置之后，就已经可以拖拽上传了，所以如果你不想在写一些js去控制上传中的其他东西，比如进度条、预览区域等，可以在form内加一个包含 fallback 类的标签，dropzone 会自己处理 fallback 类的标签区域，当然这是需要浏览器支持。如果浏览器不支持，那么那就将其作为普通的文件上传。

这通常是这样的：

手动创建dropzones

除了直接在form表单中添加 class 为 dropzone 让其自动创建外，还可以在非表单元素上面通过实例化Dropzone类实现。

// Dropzone class:

var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

或如果您使用jQuery,您可以使用jQuery插件Dropzone形式：

// jQuery

$("div#myId").dropzone({ url: "/file/post" });

注意：如果你不是使用一个表单元素,别忘了指定一个url选项,因为Dropzone不知道上传到那里。

服务器端实现

Dropzone 不提供的服务器端文件处理的代码,但是文件上传的方式是和简单的表单文件上传是相同的。比如普通的表单上传是这样：

掌握基本的服务器上的文件上传,请查看各种语言相应的文档。这里有一些基本的实现文件：

付费的文档：

如果你需要更多的信息,请看看 Dropzone FAQ 。

配置

有两种方式配置 dropzone：

方法一：

在html元素上添加 dropzone 样式类，然后就不需要手动使用js去实例化了，但是你的一些配置 Dropzone.options 对象去配置：

// "myAwesomeDropzone" 是那个 HTML 元素的 ID

// 这里的id不是驼峰格式，是以`-`为分隔，如 id="my-awesome-dropzone"

Dropzone.options.myAwesomeDropzone = {

paramName: "file", // The name that will be used to transfer the file

maxFilesize: 2, // MB

accept: function(file, done) {

if (file.name == "justinbieber.jpg") {

done("Naha, you don't.");

}

else { done(); }

}

};

方法二：

最明显的方式是通过一个选择对象时实例化一个dropzone，以前面 手动创建dropzones 的方式。

常用方法：

因为我们需要使用dropzone提供的一些样式，比如预览时图片样式等，这样就算手动创建，但也需要使用到 dropzone 样式类，那这样就会导致初始化两次，在控制台就会报错，这时候就需要在手动初始化之前设置如下代码：

// Prevent Dropzone from auto discovering this element:

Dropzone.options.myAwesomeDropzone = false;

// This is useful when you want to create the

// Dropzone programmatically later

// Disable auto discover for all elements:

Dropzone.autoDiscover = false;

例子：

将文件拖拽到此处
或点此打开文件管理器选择文件