我如何接受被拖放到 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自动绑定(bind)拖拽的文件到<input type="file" />
?
最佳答案
您可以将 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>
关于javascript - 如何将文件输入的可放置区域扩展到 div 区域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24482725/