Atribuir várias imagens (arquivos) de uma entrada de arquivo para outra (s) entrada (s) de arquivo - upload

Tenho um código de upload bem-sucedido que funciona perfeitamente usando o AJAX quando seleciono cada arquivo a ser carregado na caixa de diálogo. Portanto, cada upload tem seu próprio formulário e arquivo de entrada (botão para fazer upload), conforme mostrado abaixo. O código atual carrega arquivos sequencialmente, pois o usuário pode selecionar mais de uma fotomas não juntos & Uso o algoritmo de enfileiramento com setTimeout em Javascript para verificar se o primeiro upload termina para iniciar o segundo, terceiro e assim por diante.

<form id="form1">
    <input type="file" id="userfile1" name="userfile[]" multiple/>
</form>

<form id="form2">
    <input type="file" id="userfile2" name="userfile[]" multiple/>
</form>
.
.
.

O problema agora, quando eu seleciono várias imagens para carregar (digamos duas imagens juntas usando Ctrl), usando o primeiro arquivo de entrada, eu as pego nesta matriz:

document.getElementById('userfile1').files; 

Então agora, como posso atribuir a segunda imagem selecionada ao segundo arquivo de entrada

userfile2

Porque quero retomar o upload como antes? Não está funcionando comigo e li que há preocupações de segurança para atualizar o arquivo de entrada, mas preciso atribuir o que o usuário selecionou, não um caminho.

Eu não quero usar o FromData com AJAX, pois isso levará a alterar todo o meu código e também não é compatível com todos os navegadores, como o meu código.

Muito obrigado por sua ajuda!

questionAnswers(1)

yourAnswerToTheQuestion