对于我的项目,我正在使用Drag&删除库DropzoneJS。它工作得很好,但我希望有一个特定的功能(据我所见)不支持'开箱即用'。
在我的Dropzone配置中,我已经指定了acceptedFiles:
acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"
当我使用浏览按钮时,它会自动检查文件是否受支持。但是当我拖延时删除文件,检查在上传完成后完成,并显示带有错误消息的文件。
我想要达到的目标是阻力和阻力。 drop首先检查文件是否受支持,并自动丢弃不支持的文件。我仍然想显示一条错误消息,指出某些文件不受支持。
供参考,这是我完整的Dropzone配置:
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
});
}
}
}
答案 0 :(得分:5)
如果出现问题,您可以通过某种通知来捕获错误并删除该文件:
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);
}
});
答案 1 :(得分:0)
myDropzone.on("error", function(file, message, xhr) {
if(xhr == null) myDropzone.removeFile(file);
alert(message)
});