JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" id="clickme" value="Upload Stuff" />
<form id="upload">
<span id="input-field">
<input type="file" class="file-input" /> <!-- скрытое поле для открытия окна выбора файлов -->
</span>
<hr />
<span id="input-container">
<!-- контейнер для скрытых полей с уже выбранными файлами -->
</span>
</form>
<div id="info"></div>
CSS
input[type="file"] { visibility: hidden; width: 1px; height: 1px; }
JavaScript
function addFile(selector) {
$('#input-container').append( $('.file-input') );
$('#input-field').append( $('<input class="file-input" type="file">') );
updateFileList();
}
function updateFileList() {
var txt = '';
var fileInputs = $( '#input-container > .file-input' ).get();
for (var i = 0; i < fileInputs.length; i++) {
var file = fileInputs[i].files;
if (file[0]) {
txt += i + ". " + file[0].name + "<br>";
}
}
$('#info').html(txt);
}
$(function(){
fileCount = 0;
$('#clickme').click(function(){
$('#input-field > .file-input').click().change(addFile( $(this) ));
});
});