Wie Sie mehrere Dateieingaben an ein FormData-Objekt mit $ .each anhängen?

Question

Ich habe eine mehrfache (und dynamische) Anzahl von Eingängen von type=file.

Ich möchte ein FormData-Objekt aus ihnen erstellen.

Ich muss sie manuell auf das Objekt anhängen, wie ich Zugang zu ihren Dateinamen müssen für in eine Datenbank eingefügt und müssen daher einen Dateinamen angeben, ist dieses 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); 
}); 

Ich glaube nicht, dass das Objekt richtig gebaut wird und ich konnte den Inhalt des Objekts nicht korrekt anzeigen, um dies zu bestätigen.

Dies ist, was ich in der Konsole:

jsFiddle

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

Answer 1

Es gibt keine gute Möglichkeit, den Inhalt von Formdata zu sehen ist. Ein Trick wäre, es zu senden (POST) und den Netzwerkstatus zu sehen.

Beispiel: 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); 
}); 

dann in der Registerkarte Netzwerk (F12) Sie werden die hinzugefügten Dateien sehen, wenn die Header inspizieren.

Answer 2

//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);