Comment ajouter des fichiers multiples entrées pour un objet FormData à l'aide de $.chaque?

J'ai plusieurs (et dynamique) nombre d'entrées de type=file.

Je veux créer un objet FormData.

- Je besoin d'ajouter manuellement à l'objet que j'ai besoin d'accéder à leurs noms de fichiers pour l'insertion dans une base de données et, par conséquent, besoin de spécifier un nom de fichier est ce format:

myFormData.append(name,file,filename);

HTML

<form id="my_form" enctype="multipart/form-data">
    <input type="file" name="undefined" id="file_1" data-filename="image.jpg">
    <input type="file" name="undefined" id="file_2" data-filename="image2.jpg">
    <button>click</button>
</form>

jQuery

var myFormData = new FormData();

$(document).on("click", "button", function(e) {
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs,function(obj,v) {
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    });

    //alert(JSON.stringify(myFormData));
    console.log(myFormData);
});

Je ne pense pas que l'objet est bien construit et je n'ai pas été en mesure d'afficher correctement le contenu de l'objet pour le confirmer.

C'est ce que j'obtiens dans la console:

Comment ajouter des fichiers multiples entrées pour un objet FormData à l'aide de $.chaque?

jsFiddle

http://jsfiddle.net/rwone/K7aMw/

OriginalL'auteur user1063287 | 2014-02-20

  1. 20

    Il n'y a pas de bonne façon de voir le contenu de FormData. Une astuce serait de l'envoyer (la POSTE) et de regarder l'état du réseau.

    Exemple: http://jsfiddle.net/K7aMw/2/

    $(document).on("click", "button", function (e) {
    e.preventDefault();
    var inputs = $("#my_form input");
    $.each(inputs, function (obj, v) {
        var file = v.files[0];
        var filename = $(v).attr("data-filename");
        var name = $(v).attr("id");
        myFormData.append(name, file, filename);
    });
    var xhr = new XMLHttpRequest;
    xhr.open('POST', '/echo/html/', true);
    xhr.send(myFormData);
});

    Puis dans l'onglet Réseau (F12), vous verrez les fichiers ajoutés lors de l'inspection des en-têtes.

    Comment puis-je obtenir le name valeur c'est à dire "file_1" et "file_2" en nodejs à l'aide de formdata pour chaque fichier itération?

    OriginalL'auteur Spokey

  2. 3
    //your files should be doing something here
var files = yourfileInput[type = file].files

//will upload
var formData = new FormData();
//other info request takes
formData.append("otherInfoKey", $("#otherInfoID").val())
//Now turn to files
for (var i = 0; i < files.length; i++) {
    formData.append(files[i].name, files[i])
}

//Request
var xhr = new XMLHttpRequest();
xhr.open("post", "/upload", true);
xhr.upload.onprogress = function(ev) {
    var percent = 0;
    if (ev.lengthComputable) {
       percent = 100 * ev.loaded / ev.total;
       //$("#yourprogress").width(percent + "%");
       //or something like progress tip
    }
}
xhr.onloadend = function(e) {
    if (!/^2\d*$/.test(this.status)) {
         alert(this.responseText)
    }
}
xhr.onload = function(oEvent) {
    if (xhr.status == 200) {
        //go on
    }
}
xhr.send(formData);
    aucune explication verbale? juste des commentaires?

    OriginalL'auteur MyNameIsSoLong