javascript - 将图像从计算机拖到div？

Question

window.addEventListener("dragover",function(e){e.preventDefault();},false);
window.addEventListener("drop",function(e){e.preventDefault();},false);

$('#cover-drop-zone').ondrop = function(e) {
    alert('drop');
    return false;
};

我有上面的JS。

这是我的 HTML。

<div id="cover-drop-zone" class="image-drop-zone"><i class="icon-plus"></i></div>

当我将图像从计算机拖到浏览器窗口时，在#cover-drop-zone 上没有任何反应。

如果我将 ondrop 的目标更改为窗口，它就可以工作。

但我不希望用户能够将图像拖到窗口中的任何位置。

我哪里错了？

Answer 1

存在一些跨浏览器的方法:

<div class="drop_panel"> 
  drop here 
  <input class="hidden_input" type="file" >
</div>

和 CSS:

.drop_panel {
  padding: 50px;
  position: relative;
}
.hidden_input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}

如果文件掉落触发 .hidden_​​input onChange 事件