Question

我使用dropzone.js进行Ajax上传图片。问题是我有以下div容器

<div id="images-container" class="ui-sortable dz-clickable">
  <div id="file-image">
    <p><b>Add images</b></p>
    <small>Click or drag&drop here</small>
  </div>
</div>

dropzone.js初始化如下：

$("#file-image").dropzone();

我的CSS看起来像这样：

#file-image {
  border: 1px solid rgb(187, 187, 187);
  background: rgb(247, 247, 247);
  box-sizing: border-box;
  float: left;
  display: block;
  position: relative;
  z-index: 20;
  cursor:pointer;
}

问题在于，当我单击文本（添加图像或单击或拖放）时，无法激活插件。如何使整个#file-image div可点击？

Answer 1

我已将您的div更改为表单并添加了操作，但似乎工作正常。

HTML

<div id="images-container" class="ui-sortable dz-clickable">
  <form action="/action" id="file-image" class="dropzone">
    <p><b>Add images</b></p>
  </form>
</div>

这是官方网站的摘录 - "Dropzone will find all form elements with the class dropzone, automatically attach itself to it, and upload files dropped into it to the specified action attribute."

所以我认为你需要使用action属性来使它工作。

Codepen - https://codepen.io/anon/pen/aGKBgY

整个div可以点击CSS

1 个答案: