限制 Dropzone 仅上传特定类型的文件

Posted 2023-05-08

【中文标题】限制 Dropzone 仅上传特定类型的文件

【英文标题】：Restrict Dropzone to upload only specific type of files

【发布时间】：2018-06-15 11:00:50

【问题描述】：

我正在使用 Dropzone 上传文件，这是我的代码

<div>
    <form id="mainDiv" class="dropzone needsclick" enctype="multipart/form-data" method="post" action="uploadFiles?type=5" role="form">

        <div class="dz-message needsclick">
            Drop files here or click to upload.<br />
            <span class="note needsclick">(Please upload <strong>PDF, JPG, GIF, PNG, PDF</strong> files only.)</span>
        </div>

    </form>
</div>


<div>
    <form id="recommendationDiv" class="dropzone needsclick" enctype="multipart/form-data" method="post" action="uploadFiles?type=5" role="form">

        <div class="dz-message needsclick">
            Drop files here or click to upload.<br />
            <span class="note needsclick">(Please upload <strong>PDF, JPG, GIF, PNG, PDF</strong> files only.)</span>
        </div>

    </form>
</div>

上传工作正常，但我想限制上传文件的类型

<script>

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


</script>  

接受的文件似乎不起作用，它只是上传所有内容。

【问题讨论】：

无论你找到什么 javascript 解决方案，你都必须绝对过滤掉服务器端的那些文件（php 或其他）。客户端安全性有利于用户舒适，但它作为服务器端的保护无用。仔细检查一切

感谢@EmmanuelDelay 的建议

【参考方案1】：

您需要包含 dropzone 元素的骆驼标识。对于你的例子，你有 <form> 和 id="recommendationDiv" 所以你可以设置选项：

Dropzone.options.recommendationDiv = 
    acceptedFiles: 'image/*'
;

您正在为不存在的 ID 为“dropzone”的表单设置选项。使用正确的 id 设置后，您应该会看到正确的行为：

见Dropzone's configuration documentation。