dropzone.js 图片上传 acceptedMimeTypes

Question

我正在使用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？

谢谢。

- user1098178

Answer 1

我是Dropzone的作者。

你应该使用acceptedMimeTypes acceptedFiles。这与input元素的accept属性完全相同。这样，即使回退也能正常工作。

有效的acceptedFiles属性可以像这样：

• audio/*
• image/*
• image/jpeg,image/png
• 等等...

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

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

(为了向后兼容，acceptedMimeTypes在下一个主要版本发布之前仍将继续工作)

- enyo

---

希望能有一个类似的属性，但方向相反。阻止特定的文件类型上传。例如，我正在使用这个上传器与PHP一起使用，只要他们不上传PHP文件，我就不在乎他们上传什么文件。目前我可以通过PHP实现这一点。不过，您制作的这个上传程序确实很不错，干得好！ - Ronnie

@enyo 当您拖放文件时，此方法无法正常工作，因为它不会检查MIME类型。 - Jitender Yadav

@enyo 有关拖放问题的任何信息吗？ - thomas

我的经验是必须同时将 MIME 类型和扩展名加入白名单，但文档似乎没有提到这个要求。我不确定这是因为 MIME 类型未被正确（或完全）检测到，还是这个要求是有意的。我看到其他人也提到了同样的问题，这就是我遇到这个问题时知道如何解决的原因。 - Ben Johnson

Answer 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 是可点击的，则此选项也将用作隐藏文件输入框的 accept 参数。

- Sachin Shukla

Answer 3

你可以像这样向你的if语句添加更多的扩展：

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

这将检查文件类型是否与您指定的所有类型都不同。为了通过检查，文件必须与image/jpeg和image/png不同。

更新

我建议查看enyo的答案，因为他是Dropzone的作者。

- jdepypere

Answer 4

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

- user2865151

---

acceptedFiles: "image/*", is correct - Replace ; with , - Kiran Reddy

Answer 5

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

- Hafsal Rh

---

来自评论区：嗨，请不要只回答源代码。请尝试提供有关您解决方案如何工作的良好描述。请参阅：如何撰写好答案？。谢谢。 - sɐunıɔןɐqɐp

虽然这可能回答了作者的问题，但它缺少一些解释性的词语和/或文档链接。裸代码片段没有周围的一些短语是不太有帮助的。您也可以在如何撰写好的答案中找到很多有用的信息。请编辑您的答案 - 来自审核。 - Nick

Answer 6

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

- rafa_pe