整個div可通過CSS點擊

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將找到具有dropzone類的所有表單元素，自動將其自身附加到其中，並將上傳到其中的文件上傳到指定的action屬性。”

因此，我認為您需要使用action屬性才能使其正常工作。

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