Télécharger plusieurs fichiers de manière asynchrone par blueimp jquery-fileupload

Je suis en utilisant jQuery Téléchargement de Fichier de bibliothèque (http://github.com/blueimp/jQuery-File-Upload), et j'ai été obligé de trouver comment utiliser la bibliothèque répondant aux conditions suivantes.

  • La page a de multiples champs de saisie entouré par une balise de formulaire.
  • Les utilisateurs peuvent joindre plusieurs fichiers à chaque champ de saisie
  • Tous les fichiers sont envoyés à un serveur lorsque le bouton est cliqué, pas lorsque des fichiers sont attachés à les champs de saisie.
  • Téléchargement s'effectue de manière asynchrone
  • Dire que la page a 3 champs de saisie avec leur nom d'attributs "fichier1[]", "fichier2[]" et "fichier3[]", à la demande de la charge utile doit être comme {fichier1: [ tableau de fichiers sur fichier1[] ], fichier2: [ tableau de fichiers sur fichier2[] ], ...}

Voici jsFiddle, c'est se comporter bizarre jusqu'à présent dans ce qu'il envoie une requête post deux fois et la première est annulée.

Mises à jour

Maintenant grâce à @CBroe 's commentaire, la question que la demande est envoyée deux fois est fixe. Toutefois, les clés de la requête de paramètre n'est pas défini correctement.
Voici la mise à jour jsFiddle.

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

La partie centrale de code js qui ressemble à ça.

$(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} )
    })

})

Quelqu'un a idée de la façon d'obtenir que cela fonctionne?

source d'informationauteur Ryo

  1. 14

    Résolu.

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

    Et code 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});
    })
})
  2. 1

    La première requête POST déclenchée par votre script sera annulé, car le bouton soumet la forme (causant la deuxième requête POST).

    Utilisation type="button" sur le button si vous ne pas veux qu'il ait soumettre fonctionnalité.

  3. 0

    Vous devez soit ajouter un return false;comme indiqué ci-dessous:

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

    ou spécifier le type="button" attribut:

    <button type="button">send by fileupload send api</button>

    Afin de définir la formDatautilisez la commande suivante:

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

    Spécifiquement pour JSFiddlesi vous voulez obtenir le extra valeur dans la réponse, vous devez coder et de l'attribuer à une propriété nommée json.

    Ici's un exemple de travail.