在具有有效负载的输入上手动触发'change'事件

Question

我正在为输入元素实现拖放文件上载，但在处理拖放事件时遇到了一些困难。我有以下html:

<label for="input" id="label" ondrop="handleDrop(event)">
<input id="input" type="file" name="file"/>
<span>Choose a file or drag it here.</span>
</label>

以及以下js:

let label = document.getElementById('label');
let input = document.getElementById('input');
label.addEventListener('drop', handleDrop);
input.addEventListener('change', handleChange);
function handleDrop(e) {
e.preventDefault();
let file = e.dataTransfer.files;
console.log(file);
//and now?
}
function handleChange(e) {
//default not overwritten
let fileName = e.target.value.split('\').pop();
if (fileName) {
input.nextElementSibling.innerHTML = fileName;
}
}

当我单击输入并浏览文件时，会触发"更改"事件，文本将设置为上传的文件，"文件"属性将设置为此文件。我想当一个文件被放在标签上时也会发生同样的情况，但我不知道如何做到这一点。我可以使用input.dispatchEvent(new Event('change'))，但这不会传递放入输入的file属性中的文件。

也许我想错了这个问题，有更好的选择，但最终目标当然是在我点击提交按钮时将文件发送到我的服务器。(我使用Spring MVC的方式是使用@RequestParam("file") Multipartfile file捕获文件。(

非常感谢您的帮助：(

Answer 1

显然，我想做的是不可能的，因为出于安全原因，input type="file"的文件属性是只读的。正确的方法可能是直接将文件发送到MVC。