以下是将文件拖放到文件输入中的代码片段,并且还有一个按钮。有什么方法可以做到这一点,这样我就可以多次拖动或单击来添加单个(或任意数量的文件),而不是替换已经存在的文件,而只是添加到它们中?
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
evt.preventDefault();
};
dropContainer.ondrop = function(evt) {
// pretty simple -- but not for IE :(
fileInput.files = evt.dataTransfer.files;
evt.preventDefault();
};
<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
Drop Here
</div>
Should update here:
<input type="file" id="fileInput" />
</body>
</html>
最佳答案
想出了一个办法。我最初有 10 个输入,最后 9 个隐藏在页面上,并有一个名为 showNext 的函数来取消隐藏下一个输入行。重要的部分是我更改了 .ondrop 中的一行,以按索引将文件数据添加到特定输入,然后取消隐藏下一个输入。
dropContainer.ondrop = function(evt) {
var fileInput = document.getElementsByClassName('fileInput');
// pretty simple -- but not for IE :(
fileInput[].files = evt.dataTransfer.files;
evt.preventDefault();
count = count + 1;
showNext(count);
};
关于javascript - html5 将文件拖动到输入 - 我可以多次拖动到同一输入中并添加文件而不是替换文件吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43380077/