javascript - html5 将文件拖动到输入 - 我可以多次拖动到同一输入中并添加文件而不是替换文件吗?

标签 javascript html

以下是将文件拖放到文件输入中的代码片段,并且还有一个按钮。有什么方法可以做到这一点,这样我就可以多次拖动或单击来添加单个(或任意数量的文件),而不是替换已经存在的文件,而只是添加到它们中?

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/

相关文章:

javascript - GWT - 用 jQuery 编写的包装小部件

javascript - Justify 和 Color Button 插件之间的 CKEditor 不兼容

html - 我怎样才能垂直移动第二条线,减少它和它上面的线之间的空间?

php - 如何在标题中创建横幅

javascript - 用于响应式容器填充剩余空间的 CSS

html - Div 将无法在嵌套网格系统中正确 float

javascript - 如何确保 setInterval 的回调完全按照指定的时间间隔调用?

javascript - 使用 Mapbox 从 map 获取要素

javascript - Angular - UI Bootstrap Datepicker 未在 Bootstrap Modal 上显示

php - 随机背景图片导致登陆页面显示问题?