Question

我正在为输入元素实现拖放文件上传，但是在处理drop事件方面有些困难。我有以下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'))，但不会提供被拖放到输入文件属性中的文件。

也许我是错误地考虑了这个问题，并且有一个更好的选择可以做到这一点，但是最终的目标当然是当我单击“提交”按钮时将文件发送到我的服务器。（我通过使用@RequestParam("file") Multipartfile file捕获文件的方式使用Spring MVC。）

非常感谢您的帮助：）

Answer 1

显然，由于安全原因，input type="file"的文件属性为只读，因此我要执行的操作是不可能的。正确的方法可能是直接将文件发送到MVC。

带有有效负载的输入上手动触发“更改”事件

1 个答案: