3

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

我有一个设置，我使用自定义预览模板成功设置拖放到 dropzone 中的子区域（可点击： ，），如本期.czs1AlexanderYW 所示如何手动正确添加文件？.

DropZone 选项：

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

现在我要做的就是禁用 childZone在单击时触发 OS 文件上传对话框。我发现 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-inputclassName 获取输入，然后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')不起作用。

谢谢。

4

1 回答 1

4

您正在寻找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
});
于 2019-12-24T05:20:42.870 回答