Dropzone

}

};

方法二：

最明显的方式是通过一个选择对象时实例化一个 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;

例子：

<div class="dropzone" id="myDropzone">

<div class="am-text-success dz-message">

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

</div>

</div>

<script type="text/javascript">

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#myDropzone", {

url: "/file/upload",

addRemoveLinks: true,

method: 'post',

filesizeBase: 1024,

sending: function(file, xhr, formData) {

formData.append("filesize", file.size);

},

success: function (file, response, e) {

var res = JSON.parse(response);

if (res.error) {

$(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')

}

}

});

</script>

像上面这样，既能使用 dropzone 的样式，也能自己手动初始化上传。

配置选项

| 参数 | 描述 |

| --- | --- |

| url | 除了 form 元素以外的其他元素必须指定该参数(或当 form 元素没有操作属性)。您还可以提供一个函数,参数为files以及必须返回 url(since v3.12.0) |

| method | 默认为"post",必要的时候你也可以设置为"put"。 您还可以提供一个函数,参数为files以及必须返回这个 method(since v3.12.0) |

| parallelUploads | 同时上传多少个文件。(更多信息参见队列文件上传部分) |

| maxFilesize | 单位 MB |

| filesizeBase | 默认 1000。这个定义的基础是否应该使用 1000 或 1024 来计算文件大小。1000 是有效的,因为 1000 个字节等于 1 千字节,1024 字节= 1 Kibibyte。你可以改变为 1024，如果你不在乎的有效性。 |

| paramName | 文件上传后端接收的参数名。默认file。注意:如果你设置 uploadMultiple 为 true,那么 Dropzone 会将[]附加到这个名字，也就是后端接收的是一个 file[]数组。 |

| uploadMultiple | Dropzone 是否在一个请求中发送多个文件。如果它设置为 true,然后fallback部分的input元素须有multiple属性。这个选项也会触发其他事件(如processingmultiple)。有关更多信息,请参见事件部分。 |

| headers | 一个向服务器发送附加头的对象。如:headers: { "My-Awesome-Header": "header value" } |

| addRemoveLinks | 这将添加一个链接到每个文件，删除或取消预览文件(如果已经上传)。dictCancelUpload,?dictCancelUploadConfirmation?and?dictRemoveFile三个参数可选。 |

| previewsContainer | 定义文件预览显示。如果为null就使用 Dropzone 默认的。可以使用一段普通的 html 元素或 css 选择器。被选择的 html 元素必须包含dropzone-previews样式类确保预览显示正常。 |

| clickable | 如果为true,dropzone 元素本身将是可点击的,如果false将不可被点击。此外，还可以是一段普通的 html 或者 css 选择器，表示点击该元素触发资源管理器。 |

| createImageThumbnails | |

| maxThumbnailFilesize | 单位 MB。文件名超过这个极限时,缩略图将不会生成。 |

| thumbnailWidth | 如果为null,将使用图像的比例来计算它。 |

| thumbnailHeight | 与thumbnailWidth一样。如果两者都是 null,图像将不会调整。 |

| maxFiles | 如果不为null,定义多少个文件将被处理。如果超过,事件maxfilesexceeded将被调用。相应地 dropzone 元素得到了类dz-max—files-reached，因此你可以提供视觉反馈。 |

| resize | 创建调整信息时被调用的函数。file作为函数第一个参数，同时必须返回一个对象包含srcX,?srcY,?srcWidth?、srcHeight?和相同的?trg*。这些值将被用于ctx.drawImage()函数。 |

| init | Dropzone 初始化时调用的函数。你能在这个函数中设置事件侦听器。 |

| acceptedFiles | accept函数默认的实现函数，用于检查文件的 mime 类型或扩展。这是一个逗号分隔的 mime 类型和文件扩展名的数组。如。image/*,application/pdf,.psd。如果 Dropzone 是clickable,此选项将被用作accept函数的参数输入。 |

| accept | 一个接收file和done函数作为参数输入的函数。如果done函数调用无参数,文件会被处理。如果你在done函数中传入了参数(比如错误信息)文件将不会被上传。如果文件太大或不匹配的 mime 类型这个函数不会调用。 |

| autoProcessQueue | 当设置为 false,你必须自身调用myDropzone.processQueue()上传文件。有关更多信息,请参见下面有关处理队列。 |

| previewTemplate | 一个字符串,其中包含模板用于每一个图像。改变它满足你的需求,但确保正确地提供所有元素。你可以在页面中建立这样一个容器:id="preview-template"(设置 style="display: none;"),然后这样设置：previewTemplate: document.querySelector('preview-template').innerHTML。 |

| forceFallback | 默认值为 false。如果为 true,fallback将被强行使用。这是非常有用的测试服务器实现首要方式,确保一切如预期所想，并测试你的fallback显示如何。 |

| fallback | 当浏览器不支持时调用的函数。默认实现显示了fallback内的input域并添加一个文本。 |

| 为自定义的 dropzone,你也可以使用如下这些选项 |

| dictDefaultMessage | 任何文件被拖拽进区域之前显示的信息。这通常是被一个图像,但默认为“Drop files here to upload”。 |

| dictFallbackMessage | 如果浏览器不支持,默认消息将被替换为这个文本。默认为“Your browser does not support drag'n'drop file uploads.”。 |

| dictFallbackText | 这将被添加在input file之前。如果你提供一个fallback元素,或者该选项为空该选项将被忽略。默认为“Please use the fallback form below to upload your files like in the olden days.”。 |

| dictInvalidFileType | 如果文件类型不匹配时显示的错误消息。 |

| dictFileTooBig | 当文件太大时显示。{{filesize}}` 和?{{maxFilesize}}` 将被替换。 |

| dictResponseError | 如果服务器响应是无效的时显示的错误消息。{{statusCode}}` 将被替换为服务器端返回的状态码。 |

| dictCancelUpload | 如果addRemoveLinks为 true,文本用于取消上传链接的文字。 |

| dictCancelUploadConfirmation | 如果addRemoveLinks为 true,文本用于取消上传的文字。 |

| dictRemoveFile | 如果addRemoveLinks为 true,用于删除一个文件的文本。 |

| dictMaxFilesExceeded | 如果设置了maxFiles,这将是超过了设置的时候的错误消息。 |

你也可以覆盖所有违约事件动作选项。如果你提供的drop选项可以覆盖默认的事件处理程序。你应该熟悉代码,因为您可以轻松掌握这样的上传。如果你只是想做额外修改,比如添加一些过滤什么的，可以监听事件。

文件上传队列

当一个文件被添加到 dropzone,其status被设置到Dropzone.QUEUED(accept函数检查通过后)，这意味着该文件现在在队列中。

如果你可以选择autoProcessQueue设置为true,那么队列是立即处理,文件被删除或一个上传完成后,通过调用.processQueue(),检查有多少文件正在上传,如果它少于option.parallelUploads,.processFile将被调用。

如果你autoProcessQueue设置为false,那么.processQueue()不会被隐式地调用。这意味着当你想上传目前队列中所有文件时你必须自己调用它。

布局

为每个文件生成预览 HTML，设置 dropzone 定义的选项previewTemplate,默认为：

<div class="dz-preview dz-file-preview">

<div class="dz-details">

<div class="dz-filename"><span data-dz-name></span></div>

<div class="dz-size" data-dz-size></div>

<img data-dz-thumbnail />

</div>

<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>

<div class="dz-success-mark"><span>?</span></div>

<div class="dz-error-mark"><span>?</span></div>

<div class="dz-error-message"><span data-dz-errormessage></span></div>

</div>

当文件在上传过程中的时候，dz-preview中的dz-processing将被显示；当文件上传之后dz-success将被显示；如果文件上传错误或没网dz-error将被显示，此时data-dz-errormessage的内容将是服务器端返回的信息。

重写默认的模板，就可以使用配置中的previewTemplate选项。

您可以通过file.previewElement访问文件的 HTML 预览,并且设置任何事件。如：

success: function (file, response, e) {

var res = JSON.parse(response);

if (res.error) {

$(file.previewTemplate).children('.dz-error-mark').css('opacity', '1')

}

}

如果你想打破常规重写previewElement,可以在你想要的元素上添加data-dz-*属性：

• data-dz-name

• data-dz-size

• data-dz-thumbnail (这个必须是?<img />?元素，然后该元素的?alt?和?src?属性会被 Dropzone 自动改变为相应的值)

• data-dz-uploadprogress (当文件处于上传过程中的时候 Dropzone 将改变此元素的?style.width?的值，从 0% 到 100%)

• data-dz-errormessage

Dropzone 将寻找这些元素，并改变默认选项和更新它的内容。

如果你想要一些特定链接删除一个文件(而不是建于 addRemoveLinks 配置),您可以简单地插入元素的模板 data-dz-remove 属性。

<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />

你也不用被这些使用惯例所强迫。如果你完全覆盖所有默认事件监听器可以从头开始重建你的布局。

如果你想让你的 dropzone 看起来像[官方](()页面那样，使用安装部分提供的添加样式表和 spritemaps 即可。

看到主题部分,看看如何改变 Dropzone 的 UI。

官方创建了一个例子,配置几行代码，让 Dropzone 看起来和感觉完全和 jQuery 文件上传差不多。[Check it out!](()

Dropzone 方法

如果你想删除已添加的文件,你可以调用.removeFile(file)。这种方法也触发removedfile事件。

下面是一个示例,文件上传完成后将自动删除：

myDropzone.on("complete", function(file) {

myDropzone.removeFile(file);

});

如果你想删除所以的文件，简单地使用.removeAllFiles()。正在上传中的文件不会被删除。如果你想取消正在上传的文件，调用.removeAllFiles(true)将取消上传。

如果你设置了autoProcessQueue为false,你必须调用.processQueue()实现上传。

访问 dropzone 中的所有文件,使用myDropzone.files。

• 所有可接受的文件：.getAcceptedFiles()
  

• 所以被拒绝的文件：.getRejectedFiles()
  

• 队列中的所有文件：.getQueuedFiles()
  

• 上传中的所有文件：.getUploadingFiles()
  

如果不在需要一个 dropzone,使用当前示例调用.disable()，这将移除该元素上的事件、文件。重新激活使用.enable()。`

如果你不喜欢浏览器默认的confirm,您可以通过覆盖Dropzone.confirm处理它们:

Dropzone.confirm = function(question, accepted, rejected) {

// Ask the question, and call accepted() or rejected() accordingly.

// CAREFUL: rejected might not be defined. Do nothing in that case.

};

事件

--

Dropzone 触发事件在处理文件时,你可以通过当前实例调用.on(eventName, callbackFunction)监听事件。

因为听事件只能是 Dropzone 实例,设置你的事件侦听器,最好的地方是在 init 函数。

Dropzone.options.myAwesomeDropzone = {

init: function() {

this.on("addedfile", function(file) { alert("Added file."); });

}

};

如果你手动创建 dropzones,你可以设置实例的事件监听器,就像这样:

// This example uses jQuery so it creates the Dropzone, only when the DOM has

// loaded.

// Disabling autoDiscover, otherwise Dropzone will try to attach twice.

Dropzone.autoDiscover = false;

// or disable for specific dropzone:

// Dropzone.options.myDropzone = false;

$(function() {

// Now that the DOM is fully loaded, create the dropzone, and setup the

// event listeners

var myDropzone = new Dropzone("#my-dropzone");

myDropzone.on("addedfile", function(file) {

/* Maybe display some more file information on your page */

});

})

这是更复杂的,没有必要的,除非你有一个很好的理由来管理实例化 Dropzones。

Dropzone 本身严重依赖事件，视觉上的展示都是通过监听去做的。这些事件监听器设置在每个 Dropzone 的默认配置,可以覆盖,从而取代默认的行为实现自己的事件回调。

事件列表

<table><tbody><tr><td colspan="2">不覆盖这些配置选项,除非你知道你在做什么。</td></tr><tr><th>事件</th><th>描述</th></tr><tr><td colspan="2">所有这些接收<code>event</code>作为第一个参数</td></tr><tr><td>drop</td><td>用户松放文件到到 dropzone</td></tr><tr><td>dragstart</td><td>用户开始拖动文件到任何地方</td></tr><tr><td>dragend</td><td>拖动结束</td></tr><tr><td>dragenter</td><td>用户拖拽文件到 Dropzone</td></tr><tr><td>dragover</td><td>用户拖动一个文件经过 Dropzone</td></tr><tr><td>dragleave</td><td>用户拖动一个文件离开 Dropzone</td></tr><tr><td colspan="2">所有这些接收<code>file</code>作为第一个参数</td></tr><tr><td>addedfile</td><td>当一个文件被添加到列表中</td></tr><tr><td>removedfile</td><td>从列表中删除一个文件。你可以监听该事件然后从您的服务器删除文件</td></tr><tr><td>thumbnail</td><td>生成缩略图。接收<code>dataUrl</code>作为第二个参数</td></tr><tr><td>error</td><td>发生一个错误。接收<code>errorMessage</code>作为第二个参数,如果错误是由于 XMLHttpRequest <code>xhr</code>对象为第三个参数。</td></tr><tr><td>processing</td><td>当一个文件被处理(因为队列不会立即处理所有文件)。这个事件在<code>processingfile</code>之前被触发。</td></tr><tr><td>uploadprogress</td><td>每当文件上载过程变化是触发。获得<code>progress</code>作为第二个参数，是一个百分比(0 - 100)和<code>bytesSent</code>作为第三个参数，是已经发送到服务器的字节数量。当上传完成<code>dropzone</code>确保<code>uploadprogress</code>为 100 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 %并被调用一次。Warning：这个函数可以调用多次使用相同的<code>progress</code>。</td></tr><tr><td>sending</td><td>在每个文件发送是触发。<code>file</code>为第一个参数，<code>xhr</code>对象和<code>formData</code>对象作为第二个和第三个参数,你可以修改它们(例如添加 CSRF 令牌)或添加额外的数据。</td></tr><tr><td>success</td><td>文件已经成功上传触发。<code>file</code>为第一个参数，获取服务器响应作为第二个参数。(这一事件在<code>finished</code>之前触发。</td></tr><tr><td>complete</td><td>上传成功或错误时。</td></tr><tr><td>canceled</td><td>当一个文件上传被取消时。</td></tr><tr><td>maxfilesreached</td><td>文件数量接受到达 maxFiles 极限时</td></tr><tr><td>maxfilesexceeded</td><td>每个文件被拒绝了,因为文件的数量超过了 maxFiles 极限时触发</td></tr><tr><td></td><td></td></tr><tr><td colspan="2">所有这些收到的<code>files</code>作为第一个参数,并且就当<code>uploadMultiple</code>为<code>true</code>时触发</td></tr><tr><td>processingmultiple</td><td>见<code>processing</code>的描述。</td></tr><tr><td>sendingmultiple</td><td>见<code>sending</code>的描述。</td></tr><tr><td>successmultiple</td><td>见<code>success</code>的描述。</td></tr><tr><td>completemultiple</td><td>见<code>complete</code>的描述。</td></tr><tr><td>canceledmultiple</td><td>见<code>canceled</code>的描述。</td></tr><tr><td colspan="2">特殊事件</td></tr><tr><td>totaluploadprogress</td><td>触发时包含参数<code>total uploadProgress(0 - 100)</code>,<code>totalBytes</code>和<code>totalBytesSent</code>。这个事件可以用来显示所有文件的整体上载进度</td></tr><tr><td>reset</td><td>调用时列表中的所有文件被删除,dropzone 重置为初始状态。</td></tr><tr><td>queuecomplete</td><td>当队列中的所有文件上传完成时。</td></tr></tbody></table>

主题

如果你想对 Dropzone 的主题完全自定义,在大多数情况下,您可以简单地取代 HTML 模板预览,调整 CSS,也可以创建一些额外的事件监听器。

官方创建了一个例子,配置几行代码，让 Dropzone 看起来和感觉完全和 jQuery 文件上传差不多。[Check it out!](()。正如您可以看到的,最大的变化就是 previewTemplate。然后添加了一些额外的事件监听器来让它看起来符合自己的要求。

然而,您可以完全从头开始实现您的 UI。

覆盖默认的事件监听器,创建您自己的自定义 Dropzone,可以这样：

// This is an example of completely disabling Dropzone's default behavior.

// Do not use this unless you really know what you are doing.

Dropzone.myDropzone.options = {

previewTemplate: document.querySelector('#template-container').innerHTML,

// Specifing an event as an configuration option overwrites the default

// addedfile event handler.

addedfile: function(file) {

file.previewElement = Dropzone.createElement(this.options.previewTemplate);

// Now attach this new element some where in your page

},

thumbnail: function(file, dataUrl) {

// Display the image in your file.previewElement

},

uploadprogress: function(file, progress, bytesSent) {

// Display the progress

}

// etc...

};

上面的这些代码显然缺乏实际的实现。看源代码,看看 Dropzone 内部的实现。

如果你不需要任何默认 Dropzone UI，只对 Dropzone 的事件处理程序、文件上传和拖拽功能感兴趣,那你应该使用以上选项事件处理。

Tips

如果你不想要默认消息提示(拖拽文件上传(或单击)),您可以在你dropzone元素内添加一个元素包含类dz-message，这样dropzone就不会为您创建的消息。

Dropzone 或提交你设置的form内的所有隐藏的表单域信息。所以当你是使用form元素的形式的话，这是一个简单的方法来提交额外的数据，至于是get还是post取决于你form的method。当然也可以在 js 配置中添加其他的参数。

当事件绑定完成之后，Dropzone 会添加数据到file对象。如果是image的话，你可以通过file.width?和?file.height访问到图片的宽度和高度。而且file.upload对象会包含如下信息：progress?(0-100),?total?(总字节) and?bytesSent（已上传字节）。这样你可以通过这写信息自定义上传进度条等。