Tengo un código de carga exitoso que funciona perfectamente usando AJAX cuando selecciono cada archivo para cargar desde el cuadro de diálogo. Por lo tanto, cada carga tiene su propio formulario y archivo de entrada (botón para cargar) como se ve a continuación. El código actual carga archivos secuencialmente ya que el usuario puede seleccionar más de una fotopero no juntos & Uso el algoritmo de colas con setTimeout en Javascript para verificar si la primera carga finaliza para comenzar la segunda carga, la tercera, y así sucesivamente.

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

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

El problema ahora, cuando selecciono varias imágenes para cargar (digamos dos imágenes juntas usando Ctrl), usando el primer archivo de entrada, las obtengo en esta matriz:

document.getElementById('userfile1').files; 

Ahora, ¿cómo puedo asignar la segunda imagen seleccionada al segundo archivo de entrada?

userfile2

¿Porque quiero reanudar la carga como antes? No funciona conmigo y leí que hay problemas de seguridad para actualizar el archivo de entrada, pero necesito asignar lo que seleccionó el usuario, no una ruta.

No quiero usar FromData con AJAX, ya que eso conducirá a cambiar todo mi código y tampoco es compatible con todos los navegadores como mi código.

¡Muchas gracias por tu ayuda!