如何将文件输入的可放置区域扩展到 div 区域？答案

【问题标题】：How to extend droppable area of file inputs to area of a div?如何将文件输入的可放置区域扩展到 div 区域？
【发布时间】：2014-06-30 03:54:03
【问题描述】：

如何接受文件被拖放到 div 上，就像它们被拖到目标文件输入元素上一样？

这仅适用于<input type="file" />：

<form method="post" enctype="multipart/form-data" id="frm_upload">
    <input type="file" name="input_upload">
    <div id="div_upload">Drag & Drop here</div>
</form>

$(':file').change(function(){
    var file = this.files[0];
    var formData = new FormData($('frm_upload')[0]);
    formData.append('input_upload', file);

    $.ajax({
       url: base_url,
       type: 'POST',
       data: formData,                  
       cache: false,
       contentType: false,
       processData: false,
       dataType: 'JSON',
       success: sucessBinder
    });
});

是否可以不用ajax自动绑定拖拽文件到<input type="file" />？

【问题讨论】：

您需要在 html 上使用 on-drop、on-drag-enter、on-drag-exit 属性。答案并不能完全满足我的具体情况。私信我了解更多信息！

标签： javascript html css file-upload drag-and-drop

【解决方案1】：

您可以将 div 放在文件输入上。要让它仍然接受拖动的文件，请将pointer-events: none 添加到 div。

div {
  position: absolute;
  width: 300px;
  height: 100px;
  pointer-events: none;
  background: #000;
  color: #fff;
  text-align: center;
}
input {
  position: absolute;
  width: 300px;
  height: 100px;
  opacity: 0;
}

<input type="file" />
<div>Drop a file here</div>

【讨论】：