如何两次使用输入文件

Question

我有<input type="file" name="attach" multiple>，我需要使用这个 2 倍或更多倍。我的意思是，我需要什么：

1. 首先点击我选择2个文件：

file1.png

文件2.png

1. 第二次点击我选择3个文件：

文件3.png

file4.png

文件5.png

我需要 5 个文件。

但是当我第二次点击时，我只有最后 3 次。

Answer 1

我可以建议的一个方法是，当用户选择文件时，您可以将以前的 <input type="file"....> 替换为具有相同名称的新属性。

现在用户将再次选择几个文件并提交。您将在服务器端获得多个文件，因为两个输入元素的名称属性相同。

<div id="parent">
     <input type="file" name="attach[]" onchange="append_new_input_element(this)" multiple>
</div>

添加以下功能

function append_new_input_element(this){
parent_div = document.getElementById("parent");
this.style.display = "none";
var input = document.createElement("input");
input.type = "file";
input.name = "attach[]";             

input.setAttribute("onchange","append_new_input_element(this)");              
parent_div.appendChild(input);

}

或者我会建议为此目的使用 dropzone。 dropzone