web-dev-qa-db-fra.com

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

J'utilise la bibliothèque jQuery File Upload ( http://github.com/blueimp/jQuery-File-Upload ), et je suis restée coincée à chercher comment utiliser la bibliothèque pour satisfaire les conditions suivantes.

  • La page comporte plusieurs champs de saisie de fichier entourés d'une balise de formulaire.
  • Les utilisateurs peuvent joindre plusieurs fichiers à chaque champ de saisie
  • Tous les fichiers sont envoyés à un serveur lorsque l'utilisateur clique sur le bouton, et non lorsque les fichiers sont attachés aux champs de saisie.
  • Le téléchargement est effectué de manière asynchrone
  • Supposons que la page comporte 3 champs d’entrée dont les attributs de nom sont "fichier1 []", "fichier2 []" et "fichier3 []", le contenu de la requête doit ressembler à {fichier1: [tableau de fichiers sur fichier1 []], fichier2. : [tableau de fichiers sur fichier2 []], ...}

Voici jsFiddle, il a un comportement bizarre jusqu'à présent, car il envoie deux fois la demande de publication et le premier est annulé.

Mises à jour

Maintenant, grâce au commentaire de @CBroe, le problème de l'envoi de la demande deux fois est résolu. Cependant, le paramètre key du paramètre request n'est pas correctement défini. Voici la version mise à jour de jsFiddle. 

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

La partie principale du code js ressemble à ceci.

$(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 une idée de comment faire fonctionner ça?

javascriptjqueryfile-uploadjquery-file-uploadform-data
13
Ryo

Résolu.

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

Et js code

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

La première demande POST déclenchée par votre script est annulée, car le bouton soumet le formulaire (provoquant la seconde demande POST).

Utilisez type="button" sur la button si vous _ {ne pas} voulez que la fonctionnalité d'envoi soit disponible.

1
CBroe

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

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

ou spécifiez l'attribut type="button":

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

Afin de définir la formData, utilisez ce qui suit:

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

Spécifiquement pour JSFiddle , si vous voulez obtenir la valeur extra dans la réponse, vous devez l'encoder et l'assigner à une propriété nommée json.

Ici est un exemple de travail.

0
Alex Filipovici