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

Question

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

我找到了我需要使用window.onload功能的解决方案，是的，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只添加所有图像，但我可以访问文件夹和其他文件类型。

标签： laraveldropzone.js

Answer 1

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

从文档：

...如果您只有带有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/*',
};

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