DropzoneJS：防止上传和显示不受支持的文件

对于我的项目，我使用拖放&拖放库DropzoneJS。它运行的很好，但我想要有一个特定的功能（据我所知）不支持“开箱即用”。DropzoneJS：防止上传和显示不受支持的文件

在我的悬浮窗的配置我指定的acceptedFiles：

acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"

当我使用的浏览按钮，如果该文件是支持或不自动检查。但是，当我拖放文件时，检查完成后上传已完成，并显示错误消息的文件。

我想实现的是拖动&首先检查文件是否受支持，并自动丢弃不支持的文件。我仍想显示一条错误消息，指出某些文件不受支持。

供参考，这是我的完整的悬浮窗的配置：

import Dropzone from 'dropzone'; 

export default class UI_DropZone { 
    constructor() { 
    if (document.querySelector('#dropZone')) { 
     let previewNode = document.querySelector("#template"); 
     previewNode.id = ""; 
     let previewTemplate = previewNode.parentNode.innerHTML; 
     previewNode.parentNode.removeChild(previewNode); 

     return new Dropzone("#dropZone", { 
     url: "/dist/files", 
     thumbnailWidth: 300, 
     thumbnailHeight: 300, 
     parallelUploads: 20, 
     maxFilesize: 10, 
     acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf", 
     previewTemplate: previewTemplate, 
     previewsContainer: '#previews', 
     clickable: '.fileinput-button', 
     autoProcessQueue: false 
     }); 
    } 
    } 
}

来源

2017-05-11 Martin van Houte

你可以找出错误并删除与某种通知文件，如果它是一个问题：

init: function() { 
    this.on("error", function(file, message, xhr) { 
     if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors 
     alert(message); 
    }); 
}

与

所以你配置这将是这样的：

return new Dropzone("#dropZone", { 
    url: "/dist/files", 
    thumbnailWidth: 300, 
    thumbnailHeight: 300, 
    parallelUploads: 20, 
    maxFilesize: 10, 
    acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf", 
    previewTemplate: previewTemplate, 
    previewsContainer: '#previews', 
    clickable: '.fileinput-button', 
    autoProcessQueue: false, 
    "error": function(file, message, xhr) { 
     if (xhr == null) this.removeFile(file); // perhaps not remove on xhr errors 
     alert(message); 
    } 
});

例子：https://jsfiddle.net/m4ye8gL2/1

来源

2017-05-20 00:56:03

DropzoneJS：防止上传和显示不受支持的文件

回答

相关问题