如何将接受文件限制和文件大小限制到 DropzoneJS

Question

我的 DropzoneJS 配置设置有问题，我目前在控制台日志中遇到Dropzone is not defined。我真的不明白为什么会发生这些错误。

我找到了我需要使用window.onload 函数的解决方案，是的，Dropzone 未定义已解决。但是，即使没有发现错误，我为 Dropzone 选项设置的配置也不起作用。

我将向你们展示我用于配置接受文件和图像上传限制的示例脚本。

Dropzone 版本：5.7.0

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.css"/>

脚本：

Dropzone.dropzone = {
    acceptedFiles : 'image/*',
};

HTML：

@extends('layouts.app')

@section('content')
<div style="margin-top:80px;">
    <div class="container">
        <h4>What are you listing today?</h4>
        <br/>
        <div class="row">
            <div class="col-md-4">
                <form action="/BusinessCenterAccount/upload_post_setup" class="dropzone" id="dropzone">
                    @csrf
                </form>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header"></div>
                    <div class="card-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

选项配置的输出：

如您所见，我只添加了acceptedFiles 所有图像，但我可以访问文件夹和其他文件类型。

Answer 1

为了解决我的问题，我只是将我的 cdnjs 版本的 dropzone 更改为 5.4.0

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">

Answer 2

您的选项实际上并未被应用。 Dropzone.dropzone 不做任何事情，也不针对您的表单。

From the docs:

...如果您只有带有 dropzone 类的 HTML 元素，那么您不会以编程方式实例化对象，因此您必须将配置存储在某处，以便 Dropzone 在实例化它们时知道如何配置 dropzone。

这是通过Dropzone.options 对象完成的。

那里的例子显示：

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
...

查看您的 HTML，您的表单有一个 ID dropzone。因此，要使用示例显示的语法，您应该这样做：

Dropzone.options.dropzone = {
    acceptedFiles : 'image/*',
};

Working JSFiddle。这是该 JSFiddle 的屏幕截图，仅显示可供选择的图像文件：