javascript - DropZone.js:如何禁用文件上传并仅允许通过拖放添加到 dropzone

Question

在 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 获取输入类名然后 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')不起作用。

谢谢。

Answer 1

您正在搜索clickable选项

If true, the dropzone element itself will be clickable, if false nothing will be clickable.

You can also pass an HTML element, a CSS selector (for multiple elements) or an array of those. In that case, all of those elements will trigger an upload when clicked.

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
});