dropzone.js 图片上传接受的MimeTypes答案

【问题标题】：dropzone.js image upload acceptedMimeTypesdropzone.js 图片上传接受的MimeTypes
【发布时间】：2013-06-05 09:51:28
【问题描述】：

我正在使用 dropzone.js 插件将图像上传器添加到我的应用程序。我知道这可能是一个非常基本的问题，所以很抱歉，但我想做的是限制文件扩展名。这适用于单个文件扩展名，

<script type="text/javascript">
   Dropzone.options.dropzone = {
        accept: function(file, done) {
            console.log(file);
            if (file.type != "image/jpeg") {
                done("Error! Files of this type are not accepted");
            }
            else { done(); }
        }
    }
 </script>

所以我的问题是如何添加多个文件扩展名，即image/jpeg、image/png？

谢谢

【问题讨论】：

标签： php jquery file-upload dropzone.js

【解决方案1】：

var myDropzone = new Dropzone('div#profile_pictures',{
    acceptedFiles: "image/*", /*is this correct?*/
    init: function(){
        this.on("success", function(file, data) {
            /*..*/
            });
        } 
})

【讨论】：

acceptedFiles: "image/*", 是正确的 - 将 ; 替换为 ,

【解决方案2】：

感谢 enyo 成功了....太棒了...只需将该行粘贴到 dropjone.js->

uploadMultiple: true,  //upload multiple files
maxFilesize: 1,  //1 mb is here the max file upload size constraint
acceptedFiles: ".jpeg,.jpg,.png,.gif",

http://www.dropzonejs.com/#config-acceptedFiles

accept 的默认实现会根据该列表检查文件的 mime 类型或扩展名。这是一个逗号分隔的 mime 类型或文件扩展名列表。例如：'image/*,application/pdf,.psd' 如果 Dropzone 是可点击的，此选项也将用作隐藏文件输入的接受参数。

【讨论】：

【解决方案3】：

如果有人感兴趣（我无法评论 Enyo 的帖子）：我在应用 Dropzone 选项时遇到了问题，经过调查，我注意到我使用的 jQuery jquery-3.2.1.min.js 版本是其故障的原因 p>

【讨论】：

【解决方案4】：

var dz = $("#FileUpload").dropzone({acceptedFiles: ".jpeg"})[0];

【讨论】：

点评来源：您好，请不要只回答源代码。尝试对您的解决方案如何工作提供一个很好的描述。见：How do I write a good answer?。谢谢
虽然这可能会回答作者的问题，但它缺少一些解释性文字和/或文档链接。如果没有围绕它们的一些短语，原始代码 sn-ps 并不是很有帮助。您可能还会发现 how to write a good answer 非常有帮助。请编辑您的答案 - From Review

【解决方案5】：

您可以向if 添加更多扩展，如下所示：

if (file.type != "image/jpeg" && file.type != "image/png") {

这将检查文件类型是否不同于您指定的所有类型。要通过检查的文件，它必须不同于 image/jpeg AND image/png

更新

我建议你看看enyo's answer，因为他是 Dropzone 的作者。

【讨论】：

【解决方案6】：

我是 Dropzone 的作者。

您应该使用 ~~acceptedMimeTypes~~ acceptedFiles。这与input 元素的accept 属性完全相同。这样，即使是后备也能正常工作。

有效的acceptedFiles 属性可能如下所示：

audio/*
image/*
image/jpeg,image/png
等等……

编辑：在最新版本的 Dropzone 中，此属性称为acceptedFiles，它还允许您定义扩展。所以这会起作用：

"audio/*,image/*,.psd,.pdf"

（为了向后兼容，acceptedMimeTypes 在下一个主要版本之前仍然有效）

【讨论】：

拥有类似的属性会很好，但反过来。阻止某些文件类型。例如，我将此上传器与 PHP 结合使用，只要它们不是 PHP 文件，我不在乎它们上传什么文件。我现在可以通过 PHP 做到这一点。不过，我真的很喜欢你制作的这个上传器，干得好。
@enyo 这在你拖放文件时不起作用，它不检查 mime 类型
@enyo 有关拖放问题的任何信息？
我的经验是必须将 MIME 类型和扩展名both 列入白名单，但文档似乎没有提及此要求。我不确定这是否是因为未正确（或根本）未检测到 MIME 类型，或者此要求是否是故意的。我看到其他人也提到过，这就是为什么我遇到这个问题时知道如何解决。