dropzone.js 图片上传接受的MimeTypes

Posted

技术标签:

【中文标题】dropzone.js 图片上传接受的MimeTypes【英文标题】:dropzone.js image upload acceptedMimeTypes 【发布时间】: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/jpegimage/png

谢谢

【问题讨论】:

【参考方案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 类型,或者此要求是否是故意的。我看到其他人也提到过,这就是为什么我遇到这个问题时知道如何解决。

以上是关于dropzone.js 图片上传接受的MimeTypes的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

Dropzone.js拖拽上传(简单示例)

dropzone.js使用实践

如何克服 Laravel dropzone 文件上传中的 getClientOriginalName() 错误?

求js多张图片上传,可预览右上角带删除图标的代码

使用 dropzone.js 和 laravel 5 验证 CsrfToken