防止在 jQuery File Upload 中上传文件夹

Question

我正在使用 blueimp jQuery-File-Upload 上传文件 (https://github.com/blueimp/jQuery-File-Upload/)。我希望防止用户将文件夹拖到谷歌浏览器（或任何其他浏览器）中的放置区域。我已经尝试了选项 multiple 和 multiple directory webkitdirectory mozdirectory 。我不希望用户在任何浏览器（包括 chrome）中放置文件夹。

我们是否可以选择阻止文件夹？或者我们可以选择在文件夹出现放置区域之前对其进行压缩吗？或者是否可以显示一条警告消息，指示用户必须将文件夹转换为 zip/rar 并拖动？

Answer 1

我没有找到选项，但它更改了 jquery.fileupload.js 中的代码

 } else if (entry.isDirectory) {
       // directory drag prevent
       //dirReader = entry.createReader();
       //readEntries();
} else {

Answer 2

所以，我遇到了同样的问题。在 Chrome 上检测它的方法是查找 data.originalFiles.length > 1，在 Firefox 上您要查找 data.files[0].size === 0。

我尝试设置minFileSize: 1、maxNumberOfFiles: 1（也设置getNumberOfFiles！）、singleFileUploads: false 和limitMultiFileUploads: 1 的选项...但它们似乎都不能很好地工作，而且文档有点模糊，代码有点复杂。

他们确实有一个验证选项 (https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processqueue)，但该示例使用了 jQuery 中已弃用的 $.Deferred 方法。

所以，我最终做了这样的事情（我删除了所有自定义的东西和额外的东西，使它更简单/切中要害）：

var jqXHR = null;

$('#fileupload').fileupload({
  multipart: false,
  add: function(e, data) {
    if (data.originalFiles.length > 1 || data.files[0].size === 0) {
      fileError(null, 'zip');
    } else {
      jqXHR = data.submit();
    }
  },
  error: function(jqXHR, textStatus) {
    self.fileError(jqXHR, textStatus);
  }
});

var fileError = function(jqXHR, textStatus) {
  var statusCode = jqXHR ? jqXHR.status : 0;
  // Figure out something nice to say, then close modal and clear out input box.
  var friendlyError = 'Your file failed to upload.';

  if (textStatus === 'abort') {
    friendlyError = 'Your file upload was aborted.';
  } else if (textStatus === 'error') {
    friendlyError = 'There was a server error that prevented your file from being uploaded.';
  } else if (textStatus === 'zip') {
    friendlyError = 'This file cannot be uploaded. Please zip the file and try again.';
  }

  // Your custom UI code here!
};

基本上，如果有多个文件或文件大小为0，则触发错误代码而不是提交jqXHR数据。然后，覆盖fileupload 中的错误处理以也使用此错误处理程序，因为 DRY。