Dropzone：动态更改接受的文件

Question

我正在尝试更改以前创建的 Dropzone 的接受文件选项。

这是我设置选项的方式：

$myDropzone.options.acceptedFiles = '.jpg, .png';

这是生成的 Dropzone：

var $myDropzone = $("#my-dropzone");
$myDropzone.dropzone({
    maxFiles: 100,
    maxFilesize: 32,
    acceptedFiles: ".jpg"});

产生的错误是：

TypeError: $myDropzone.options 未定义

更新：

似乎这没有运行任何错误：

$myDropzone.options = { acceptedFiles: '.jpg, .png' };

但接受新文件类型也没有变化。

这里是操场示例：http://codepen.io/anon/pen/GqqLGo

Answer 1

使用 Dropzone 文档中提到的接受回调函数可以工作，但它不会限制用户文件资源管理器中显示的文件类型。如果文件没有可接受的文件扩展名，它只会在用户选择后丢弃文件。相反，请完成以下步骤。

1. 在代码中的某处更改隐藏输入的接受属性，使其在 dropzone 初始化后但在用户可以使用 dropzone 之前触发。这将限制用户可以选择的文件类型。

   $('.dz-hidden-input').attr('accept', '.pdf, .doc, .docx');
   var mediaType = 'document';
   

2. 在用户添加文件后更改acceptedFiles 选项以告诉Dropzone 可以接受哪些文件类型。从技术上讲，这可以添加到在发送文件之前触发的任何 Dropzone 事件回调中。

   $('#dropzone').dropzone({
       acceptedFiles: 'image/*',
       init: function () {
           this.on('addedfile', function (file, xhr, formData) {
               if (mediaType == 'document') {
                   this.options.acceptedFiles = '.pdf, .docx, .doc';
               }
           });
       }
   });
   

Answer 2

我自己最终使用了这个

$("input").each(function() 
{
    var type = $(this).attr('type');
    if(type == "file")
    {
        $(this).attr("accept", ".pdf");
    }
});

Answer 3

您不能动态更改属性 acceptedFiles。但你可以这样做：

var acceptedTypes = ['jpg','png']

$('#dropzone').dropzone({
url: url,
accept: function(file, done) {
            if ($.inArray(file.name.slice(-3), acceptedTypes ) >= 0) {
                //accepted file
                done();
            }
            else {
                //Unaccepted file revert
                this.removeFile(file);
            }
       }
});

Answer 4

这对我有用

Dropzone.options.fileupload = {
        acceptedFiles: 'image/*,.mp3',
        maxFilesize: 100 // MB
    };

Answer 5

$myDropzone 是 jQuery-Resultset 而不是 Dropzone 实例。

在Dropzone的网页上你可以在Version 2.0附近找到这个信息：

另一件事发生了变化，Dropzone 不再将其实例存储在元素的 data 属性中。因此，现在要为元素获取 Dropzone：

// DEPRECATED, do not use:
$("#my-dropzone").data("dropzone"); // won't work anymore  
// Do this now:   
Dropzone.forElement(element); // Providing a raw HTMLElement
// or
Dropzone.forElement("#my-dropzone"); // Providing a selector string.

如果你想访问分配给给定元素的 dropzone 元素，你需要使用Dropzone.forElement(element);

要访问或更改 jQuery 结果集中元素的选项，您需要这样做：

Dropzone.forElement($myDropzone.get(0)).options.acceptedFiles = '.jpg, .png';

Answer 6

为您想要的类型更改 2° 参数：

myDropzone.hiddenFileInput.setAttribute("accept", '.png,.jpg');