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

Question

如何接受文件被拖放到 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" />？

Answer 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>