DropZone.js: 如何禁用文件上传并只允许通过拖放添加到拖放区

Question

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

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

DropZone 选项：

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

现在我想要做的就是在单击时禁用触发OS文件上传对话框的childZones。我发现 dropzone 的输入标签隐藏了 class 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') 不起作用。

谢谢。

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>

如果您希望整个 body 成为一个 Dropzone 并在其他地方显示文件，您可以简单地为 body 实例化一个 Dropzone object 并定义 previewsContainer 选项。 previewsContainer 应该有 dropzone-previews 或 dropzone class 才能正确显示文件预览。

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

DropZone.js: 如何禁用文件上传并只允许通过拖放添加到拖放区

DropZone.js: How to disable file Uploading and only allow adding to dropzone via drag and drop

javascript

dropzone.js

vue2-dropzone