Question

我有一张input type="file"的表单。我div周围有一个input。然后，我将input设置为display:none。在JavaScript中，我设置了当您选择div时，input被选中。

这一切都很好用，但是如何将文件拖到div上，input会触发drop事件？

所以，我将如何处理click事件：

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

我正在寻找类似的东西：

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

JSFiddle

＆＃13;

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

＆＃13;

#browseFileDiv {
  height: 200px;
  width: 200px;
  background-color: orange;
  border-radius: 50%;
}
#browseFileDiv > input {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <div id="browseFileDiv">
    <input id="openFile" name="img" type="file" />
  </div>
</form>

＆＃13;

Answer 1

$('#browseFileDiv').on('drop', function(){/* code here */})可能是您正在寻找的。

您可能真的想使用jQuery UI。点击view source按钮。

Answer 2

首先，您不需要在<input type="file">周围包含div，然后使用javscript触发该输入文件的.click()事件，如果单击div，请创建{{1对于这个输入文件并设置它的样式，因此你可以只用HTML触发click事件而不需要javascript：

<label>

已更新：然后，与此JS Fiddle一样，问题是<label for="openFile" id="browseFile"></label> <input id="openFile" name="img" type="file">和return false;事件需要ondragover

ondrop

** 请注意，上述内容适用于多个文件。

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

触发放弃事件

JSFiddle

2 个答案: