FormData Ajax Anfrage mit Datei-Upload

Question

Ich habe versucht, ein Array von Dateien auf einen MVC Controller hochladen, aber bisher nicht gelungen, wie die HttpPostedFileBase[]null auf der Controller-Antwort-Methode.

Zuerst habe ich speichern mehrere hochgeladene Dateien in eine Variable wie folgt aus:

$("#file").change(function() { 
    fileArray[fileId] = this.files[0]; 
    fileId++; 
}); 

Das Anfügen von Dateien an das Array funktioniert gut (markiert mit Chrome Debugger).

Später, wenn der Benutzer die Bilder trägt, ich bin die Daten in ein Formdata-Objekt angehängt:

var data = new FormData(); 

$.each(fileArray, function (key, value) { 
    data.append('files[]', value); 
}); 

Dann endlich Ich mache den AJAX Call:

var serviceURL = '@Url.Action("OpenMaterialRequestSubmit", "OpenMaterialRequest")'; 

    $.ajax({ 
     type: "POST", 
     url: serviceURL, 
     data: data, 
     cache: false, 
     processData: false, 
     contentType: false, 
     success: successFunc, 
     error: errorFunc 
    }); 

von empfangen werden Meine Controller-Methode, mit der folgenden Überschrift:

[HttpPost] 
public async Task<ActionResult> OpenMaterialRequestSubmit(HttpPostedFileBase[] files) 

files, wie ich schon sagte, ist immer null.

Anfrage-Payload auf Google Chrome Debugger:

------WebKitFormBoundaryniIQHyAUAYUfecDX 
Content-Disposition: form-data; name="files[]"; filename="Screen Shot 2015-12-03 at 9.19.02 AM.png" 
Content-Type: image/png 


------WebKitFormBoundaryniIQHyAUAYUfecDX-- 

Jeder Hinweis?

Answer 1

Sie müssen die Eigenschaftsnamen files[] zu files

$.each(fileArray, function (key, value) { 
    data.append('files', value); 
}); 

Randnotiz ändern: Eine Alternative wäre, direkt auf die Dateien in das FormData Objekt im

.change Ereignis hinzufügen

var data = new FormData(); 
$("#file").change(function() { 
    data.append('files', $(this).get(0).files[0]); 
});