Javascript 如何仅使Dropzone.js预览Div可单击，而不使整个表单可单击

我必须使用dropzone.js表单，它向另一个页面发送一些输入和一个文件上传信息

我的dropzone代码如下-->

但我只想使预览容器既可点击又可拖放，这是我通过使用

previewsContainer:“#dropzonePreview”

，设置的，而不是整个表单

如果我使用

clickable:false

我将无法单击previews div以显示文件上载对话框，即使我将文件拖放到表单上的任何位置。我不希望发生这种情况，我只希望预览容器是拖放的和可点击的，但同时如果我点击提交，整个表单必须上传

我读过dropzone教程，但这只是我真正想做的一半

有没有什么方法可以有效地使用Dropzone实现所有这些

或者，您可以创建dropzones programmaticaly（即使在非 表单元素），通过实例化Dropzone类

您需要将dz clickable类添加到所需的元素中

HTML

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Drop files here to upload</span>
    </div>
</div>

注意

如果您收到控制台错误，提示：

Dropzone已连接

，请确保在启动新的Dropzone对象之前添加此行

Dropzone.autoDiscover = false;

---

我也一直在研究这个问题，终于在页面上找到了答案

关键是将

可点击：

选项设置为您希望活动Dropzone区域所在的位置。以您的示例为例，如果您希望预览区域也是拖放/单击区域，请设置

clickable:“#dropzonePreview”

，这将使该区域处于活动状态。如果您想在其中显示“Drop Files”（拖放文件）图像，请使用以下选项：

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

把文件放在这里上传

这允许您使用单个Dropzone表单（因此所有字段都作为一个表单提交），同时仍然允许您指定一个较小的区域用于拖放/单击

---

不过需要注意的是，不要将其设置得太小，就好像您将图像拖放到浏览器中加载图像的区域之外而不是页面一样。

文档中说要设置选项：“clickable:true”，但是

---

我的问题是我在上传表单（框）中添加了可见标记。如果希望框中的每个点都可单击，则视图中不能包含任何其他可见标记，需要将其添加到选项“dictDefaultMessage”。

我只想使PreviewContainer可单击。整个表单不能单击。我尝试将

dz clickable

类添加到PreviewContainer div中，但没有成功。我知道这一点，但我想在表单中提交文件和输入。。你的例子只会提交文件而不是输入，不是吗？嗨，你能告诉我在url

url:“/file/post”

@mlets3113858 url:保存处理图像上载的服务器端路径内传递什么吗。如果你有一个PHP脚本，它可能是或类似的东西。@Xhezari谢谢你给我这个想法：）谢谢你只是添加了

clickable:“#dropzonePreview”

工作得很神奇。但是我认为将

dz message

类添加到preview div会使它不可见（display:none），所以我删除了这个类。我的div现在看起来是这样的

仅供阅读本文的其他人参考，只有

clickable

提供了一个ID，这个解决方案才似乎有效。如果您尝试使用类来设置它，它将不起作用。^这是您特定配置的一个错误。将类添加为“可点击”效果很好。我对类也有同样的问题，只有当它们有ID时才能将元素添加为可点击。@ChaosTheory-我如何在引导标记编辑器中集成dropzone？亲爱的Art，你能添加一些代码来说明你的答案吗？

Dropzone.autoDiscover = false;

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>