如何使用输入文件两次


How to use input file twice

我有<input type="file" name="attach" multiple>,我需要多次使用它 2 次或更多次。我的意思,我需要的:

  1. 首先单击我选择 2 个文件:

文件1.png

文件2.png

  1. 第二次单击我选择 3 个文件:

文件3.png

文件4.png

文件5.png

我需要 5 个文件。

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

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

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

<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);
}

或者我会建议为此目的使用拖放区。拖放区