Invio di più campi di input di file a livello di codice in un formato

Question

Sto provando a utilizzare il plug-in blueimp/jQuery-File-Upload per inviare a livello di codice più di un campo di input di file con la stessa forma.

Quando l'utente seleziona i file di modulo, li aggiunge semplicemente in una variabile JS per inviarli ulteriormente con il metodo $('#form').fileupload('send') all'invio del modulo. Il mio obiettivo è utilizzare lo stesso modulo sincrono che stavo usando in precedenza in modo asincrono. Pertanto, quando l'utente fa clic sul pulsante di invio del modulo, impedisce l'azione predefinita e consente al plug-in di eseguire l'attività, inviando tutti i dati del modulo e visualizzando i progressi generali del caricamento.

che sto seguendo principalmente queste guide:

• https://github.com/blueimp/jQuery-File-Upload/wiki/API
• https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

In realtà è quasi di lavoro, ma non invia più di un file di input fino alla fine del server. Nell'evento fileuploadadd sto premendo data.files[0] (i miei input di file sono solo file singoli, ma ognuno di essi utilizza attributi accept diversi) a un array "globale" uploadable e quindi sull'invio di modulo uso qualcosa come $('#form').fileupload('send', {files: uploadable}).

Suppongo che non lo sto facendo nel modo giusto, dal momento che solo un file viene inviato insieme ai dati del modulo. Qual è il modo corretto per inviare in modo programmatico più di un file di input file utilizzando un singolo modulo?

Anche io non sono molto fiducioso sull'avanzamento generale del caricamento ... Se utilizzo l'evento fileuploadprogressall per leggere l'avanzamento del caricamento, verrà segnalato lo stato di avanzamento di tutti i file caricati?

JS (semplificato)

$(function() { 
    var uploadable = []; 

    $('#form').fileupload({ 
     autoUpload: false, 
     singleFileUploads: false, 
     add: function (event, data) { 
      uploadable.push(data.files[0]); 

      return false; 
     }, 
     // other event callbacks 
    }) 
     .prop('disabled', !$.support.fileInput) 
     .parent().addClass($.support.fileInput ? undefined : 'disabled'); 

    $('#form').submit(function (event) { 
     event.preventDefault(); 

     $('#form').fileupload('send', {files: uploadable}); 
    }); 
}); 

HTML

<form id="form" action="upload" method="post" enctype="multipart/form-data"> 
    <!-- other text/hidden inputs that will also be sent --> 
    <input type="file" name="image" id="image" accept="image/*" /> 
    <input type="file" name="video" id="video" accept="video/*" /> 
</form> 

Answer 1

uploadable.push(data.files[0]) 

È vividamente detto al compilatore di spingere solo il primo file.
Hai provato a utilizzare foreach e a spingere tutti i file?

Grazie,