Caricamento di più file in modo asincrono da blueimp jquery-fileupload

Sto usando la libreria Upload di jQuery File ( http://github.com/blueimp/jQuery-File-Upload ), e sono rimasto bloccato a capire come utilizzare la libreria soddisfacendo le seguenti condizioni.

  • La pagina ha più campi di input file circondati da un tag form.
  • Gli utenti possono albind più file a ciascun campo di input
  • Tutti i file vengono inviati a un server quando si fa clic sul pulsante, non quando i file vengono allegati ai campi di input.
  • Il caricamento viene eseguito in modo asincrono
  • Supponiamo che la pagina abbia 3 campi di input con i loro attributi di nome “file1 []”, “file2 []” e “file3 []”, il carico utile della richiesta dovrebbe essere come {file1: [matrice di file su file1 []], file2 : [matrice di file su file2 []], …}

Ecco jsFiddle, si sta comportando in modo strano finora in quanto invia la richiesta post due volte e la prima viene annullata.

aggiornamenti

Ora grazie al commento di @CBroe, il problema che la richiesta viene inviata due volte è stato risolto. Tuttavia, le chiavi del parametro request non sono impostate correttamente. Ecco aggiornato jsFiddle.

http://jsfiddle.net/BAQtG/27/


La parte principale del codice js è simile a questa.

    $(document).ready(function(){ var filesList = [] var elem = $("form") file_upload = elem.fileupload({ formData:{extra:1}, autoUpload: false, fileInput: $("input:file"), }).on("fileuploadadd", function(e, data){ filesList.push(data.files[0]) }); $("button").click(function(){ file_upload.fileupload('send', {files:filesList} ) }) }) 

    Qualcuno ha idea di come farlo funzionare?

    Risolto.

    Fiddle: http://jsfiddle.net/BAQtG/29/

    E il codice js

     $(document).ready(function(){ var filesList = [], paramNames = [], elem = $("form"); file_upload = elem.fileupload({ formData:{extra:1}, autoUpload: false, fileInput: $("input:file"), }).on("fileuploadadd", function(e, data){ filesList.push(data.files[0]); paramNames.push(e.delegatedEvent.target.name); }); $("button").click(function(e){ e.preventDefault(); file_upload.fileupload('send', {files:filesList, paramName: paramNames}); }) }) 

    La prima richiesta POST innescata dallo script viene annullata, perché il pulsante invia il modulo (causando la seconda richiesta POST).

    Usa type="button" sul button se non vuoi che abbia la funzionalità di invio.

    Devi aggiungere un return false; , come mostrato di seguito:

     $("button").click(function(){ file_upload.fileupload('send', {files:filesList} ) return false; }) 

    o specifica l’attributo type="button" :

      

    Per impostare formData , utilizzare quanto segue:

     $("button").click(function () { file_upload.fileupload('send', { files: filesList, formData: { json: JSON.encode({ extra: 1 }) } }) }) 

    Specificamente per JSFiddle , se vuoi ottenere il valore extra nella risposta, devi codificarlo e assegnarlo a una proprietà chiamata json .

    Ecco un esempio funzionante.