html5拖动文件输入 - 我可以多次拖动到相同的输入并添加文件而不是替换？ [英] html5 drag file to input - can I drag multiple times into same input and have file added instead of replacing?
问题描述
以下是将文件拖放到文件输入中的片段，还有一个按钮。有什么方法可以让我这样做，所以我可以拖动或点击添加一个（或任意数量的文件）倍数，但不是替换已经存在的文件，它只是添加到他们？
The following is a snippet to drag and drop files into a file input and also has a button. Is there any way that I can make it so I can drag or click to add a single (or any number of files) multiples times, but instead of replacing the file already there it just adds to them?
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中通过索引将文件数据添加到特定输入，然后取消隐藏下一个输入。
Figured out a way to do it. I originally had 10 inputs, with the last 9 hidden on the page and a function called showNext to unhide the next input row. the important part is I changed a line in .ondrop to add the file data to a particular input by its index and then unhide the next input.
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);
};
这篇关于html5拖动文件输入 - 我可以多次拖动到相同的输入并添加文件而不是替换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
