DropZone.js:如何禁用文件上载，并且仅允许通过拖放添加到下拉区域
在dropzone (或vue2dropzone)中，是否有一种方法可以禁用文件上传，并且只允许通过拖放添加到下拉区域。
我有一个设置，成功地使用自定义预览模板(如.czs1中的AlexanderYW 这里所示)在下拉区域中设置了一个拖放子区域(clickable：如何正确地手动添加文件？ )。
DropZone选项：
dropzoneOptions: {
url: 'http://localhost:3000/imageUpload',
thumbnailWidth: 250,
autoProcessQueue: false,
addRemoveLinks: true,
clickable: `.czs1`,
previewTemplate: this.template(),
},现在，，，我想做的就是在单击OS文件上传对话框时禁用childZones。我发现下拉区域隐藏了一个类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')不能工作。
谢谢。
回答 1
Stack Overflow用户
发布于 2019-12-24 05:20:42
您正在搜索clickable选项
如果为true，则下拉区域元素本身将是可单击的，如果为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应该有下拉区域预览或下拉区域类来正确显示文件预览。
new Dropzone(document.body, {
previewsContainer: ".dropzone-previews",
// You probably don't want the whole body
// to be clickable to select files
clickable: false
});https://stackoverflow.com/questions/59391676
复制相似问题
腾讯云开发者
