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>

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

1 个答案: