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/jpeg
、image/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实现图片的批量拖拽上传