dropzonejs 文件类型答案

【问题标题】：dropzonejs file typesdropzonejs 文件类型
【发布时间】：2013-04-11 11:55:09
【问题描述】：

我正在使用dropzonejs 进行简单的文件上传。不过，我目前有一些问题。

我不知道如何限制上传文件的类型。我在我的 PHP 后端进行了文件验证，但文件似乎已上传（它们得到一个复选标记），即使它们没有通过这些过滤器。不过，这不是一个真正的问题。我想要的唯一类型的额外 javascript 过滤是文件类型。目前您可以选择任何类型的文件，但我想将其限制为一个上传器中的图像文件和另一个上传器中的 pdf/word/excell。这可以在插件本身完成，或者在其他地方用js如何完成？

该插件不需要jquery，但我在其他地方使用jquery，所以它可以用于解决方案。

【问题讨论】：

标签： javascript jquery file-upload multifile-uploader

【解决方案1】：

从 dropzone 文档 (http://www.dropzonejs.com/) 中可以看到接受选项 -

Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

您所要做的就是根据您的目的对其进行修改，例如接受具有特定扩展名的文件。

【讨论】：

哦，我看过那段代码，但并没有真正考虑清楚。我可以使用 file.type 来获取文件类型。然而，问题是，它在选择文件时运行该代码。 done() 也与我所有成功上传后做同样的事情。所以假设你选择了 20 个正确的文件，然后选择了一个错误的文件，它会执行 done() 函数。就我而言，done() 函数执行 window.location.reload();... 以下是完整代码：pastebin.com/AHxC9NWy
经过一番摸索后，我设法修复了它。显然done("error") 触发了complete 事件。所以在整个事件中，我有一个新的 if 语句。由于我不希望文件自动上传，但仅在单击按钮后，我检查了是否已单击按钮。这是最终代码：pastebin.com/yUbkRqTA
太棒了！很高兴你明白了。

【解决方案2】：

Dropzone 处理错误的默认方式是将其显示在屏幕上（在其默认模板中显示为 X）。为了区别处理，我处理了错误事件：

this.on('error', function (file, errorMessage, xhrError) {
        this.removeFile(file);
        alert(errorMessage);
    });

这样就报错了，没有文件上传的UI错觉。

【讨论】：