DropZone.js：如何禁用文件上传，只允许通过拖放添加到 dropzone答案

【问题标题】：DropZone.js: How to disable file Uploading and only allow adding to dropzone via drag and dropDropZone.js：如何禁用文件上传，只允许通过拖放添加到 dropzone
【发布时间】：2020-04-10 23:39:15
【问题描述】：

在dropzone（或vue2dropzone）中，有没有办法禁用文件上传并且只允许通过拖放添加到dropzone。

我有一个设置，我使用自定义预览模板成功设置拖放到放置区中的子区域（可点击：.czs1），如 AlexanderYW here 在本期 How to properly add files manually? 中所示。

DropZone 选项：

dropzoneOptions: {
    url: 'http://localhost:3000/imageUpload',
    thumbnailWidth: 250,
    autoProcessQueue: false,
    addRemoveLinks: true,
    clickable: `.czs1`,
    previewTemplate: this.template(),
  },

现在我要做的就是在点击时从触发操作系统文件上传对话框禁用 childZones。我发现 dropzone 有一个隐藏的输入标签 dz-hidden-input

<input type="file" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

所以在下面，我使用.dz-hidden-input className 和event.preventDefault() 获取每个输入，但是这不起作用。

  var dropZoneInput = document.getElementsByClassName('dz-hidden-input')

  dropZoneInput.forEach(item => {
       item.addEventListener('click', function () {
           event.preventDefault()
       })
  })

是否可以在标准 API（由 Dropzone 提供）中实现这一点。如果不是如何解决，因为上面的document.getElementsByClassName('dz-hidden-input') 不起作用。

谢谢。

【问题讨论】：

event 没有在任何地方初始化是有原因的吗？我想这是函数的参数，但不清楚您的问题是在那里还是其他地方。

标签： javascript dropzone.js vue2-dropzone

【解决方案1】：

您正在搜索clickable 选项

如果为 true，则 dropzone 元素本身将是可点击的，如果为 false 什么都不能点击。

您还可以传递一个 HTML 元素、一个 CSS 选择器（用于多个元素）或这些元素的数组。在这种情况下，所有这些元素点击后会触发上传。

var dropZoneInput = document.querySelectorAll('.dz-hidden-input')

dropZoneInput.forEach(item => {
  new Dropzone(item, {
    clickable: false
  });
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script>

<form action="/file-upload" class="dropzone dz-hidden-input">
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>

<form action="/file-upload" class="dropzone dz-hidden-input">
  <div class="fallback">
    <input name="file" type="file" />
  </div>
</form>

如果您希望整个主体成为 Dropzone 并在其他位置显示文件，您可以简单地为主体实例化一个 Dropzone 对象，并定义 previewsContainer 选项。 previewsContainer 应具有 dropzone-previews 或 dropzone 类以正确显示文件预览。

new Dropzone(document.body, {
  previewsContainer: ".dropzone-previews",
  // You probably don't want the whole body
  // to be clickable to select files
  clickable: false
});

【讨论】：