题 dropzone.js图片上传acceptedMimeTypes


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

谢谢


23
2018-06-09 17:06


起源




答案:


您可以为自己添加更多扩展程序 if,像这样:

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

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

更新

我建议看看 enyo的回答 因为他是Dropzone的作者。


11
2018-06-09 17:09



非常感谢,这是一种享受。 - user1098178


我是Dropzone的作者。

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

有效 acceptedFiles 属性可能如下所示:

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

编辑:在最新版本的Dropzone中调用此属性 acceptedFiles 它还允许您定义扩展。这样可行:

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

(为了向后兼容 acceptedMimeTypes 仍然有效,直到下一个主要版本)


90
2018-06-24 12:47



有一个类似的财产,但反过来会很好。阻止某些文件类型。例如,我将这个上传器与PHP结合使用,我不关心他们上传的文件,只要它们不是PHP文件。我现在可以通过PHP做到这一点。我真的很喜欢你做的这个上传者,干得好。 - Ronnie
@enyo拖放文件时这不起作用,它不会检查mime类型 - Jitender Yadav
@enyo关于拖放问题的任何信息? - Thomas Haarbach
我的经验是,必须将白名单列入白名单 都 MIME类型和扩展名,但文档似乎没有提到这个要求。我不确定这是因为MIME类型没有被正确检测(或根本没有),或者这个要求是否是故意的。我看到其他人提到了同样的问题,这就是我遇到问题时如何解决问题的原因。 - Ben Johnson


谢谢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参数。


20
2017-10-15 07:33





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

5
2017-10-10 01:43