触发掉落事件

Question

我有一个带有input type="file". 我div周围有一个input. 然后我将其设置input为display:none. 在 JavaScript 中，我设置当您选择 时div， 就会input被选中。

这一切都工作得很好，但是当您将文件拖到 上时div，我怎样input才能触发一个drop事件呢？

所以我将如何举办该click活动：

$('#target').click();

我正在寻找这样的东西：

$('#target').drop();

JSFiddle

$('#target').click();

$('#target').drop();

$(document).ready(function() {
  $('#browseFileDiv').click(function(e) {
    $(this).find('input[type="file"]').click();
  });

  $('#browseFileDiv input').click(function(e) {
    e.stopPropagation();
  });
});

Answer 1

首先，您不需要用<input type="file">div 包裹它，然后.click()如果您单击 div，则使用 javscript 触发该输入文件的事件，<label>为该输入文件创建一个并设置其样式，因此您可以使用以下命令触发单击事件仅 HTML，无需 JavaScript：

<label for="openFile" id="browseFile"></label>
<input id="openFile" name="img" type="file">

更新：然后，就像在这个JS Fiddle中一样，问题是您需要return false;为ondragover和ondrop事件

var browseFile = document.getElementById('browseFile');
browseFile.ondragover = function () {
    return false;
};
browseFile.ondrop = function (event) {
    event.preventDefault && event.preventDefault();
    var files = event.dataTransfer.files;
    console.log(files);
    return false;
};

**请注意，上述方法也适用于多个文件。

资源：http://html5doctor.com/drag-and-drop-to-server/