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：防止上傳和顯示不受支持的文件

回答

相關問題