Dynamisch erstellte Fineuploader und Serialisierung von Formulardaten (Drahtformat für Modellbindung)

Question

Ich arbeite mit dem jquery Wrapper für Fineploader (v5.3) innerhalb einer MVC C# App.

Mein Controller ruft eine Reihe von Metadaten ab, wie meine Ansicht aussehen muss ('n' Anzahl der Textfelder und 'n' Anzahl der Upload-Steuerelemente), und sie wird an die Ansicht übergeben. BAM. Das Erstellen dieser dynamischen Upload-Steuerelemente ist hier bereits gelöst: Dynamic Multiple Upload Instances. Mein aktuelles Problem ist etwas anders, da ich den Upload und das Formular-Posting benötigt, um in einer Aufnahme zusammen zu arbeiten (kein Zwischenspeicher zum Speichern von Dateien). Da ich nicht weiß, was von der Ansicht an den Controller weitergegeben werden soll, verwende ich Wörterbuchsammlungen, um sowohl wichtige ID-Informationen als auch deren Werte zu verfolgen. Das Serialisieren der Textsammlung von der Ansicht zum Controller funktioniert gut (d. H. FieldName [0] .property = value. Siehe Hanselmans Wire Format For Model Binding here für weitere Details).

Also, was ist mein eigentliches Problem? Diese Serialisierung des Drahtformats funktioniert für die Datei (en) des Uploaders und wird mit dem Formular korrekt gepostet.

Also, Sie jetzt jetzt die High-Level-Fragen, lassen Sie mich beginnen, detaillierter zu erklären.

Hier ist das Controller-Modell:

Hier ist die Form Post ohne Upload-Info: Sie können den Draht Format hier in Aktion sehen. Serialisiert schön.

Hier ich dynamisch ein verstecktes HTML-Feld erstellen, fügen Sie einen Schlüssel und Wert hinzu. Es serialisiert nur gut in die UserText-Wörterbucheigenschaft. Sehen Sie, dass hier:

Hier ist mein FineUploader jQuery-Code. Ich verwende Razor, um der Instanz einen Zähler hinzuzufügen, sodass jeder einzigartig ist.

$('#files-upload@(counter)').fineUploader({ 
    debug: false, 
    autoUpload: false, 
    template: 'qq-template-@(counter)',  
    form: { 
     element : '@formId' 
    }, 
    validation: { 
     acceptFiles: ['image/*', 'application/acrobat', 'application/x-pdf', 'text/pdf', 'text/x-pdf'], 
     allowedExtensions: ['jpeg', 'jpg', 'pdf', 'tif', 'tiff'], 
     sizeLimit: 1024 * 1024 * 9, 
     stopOnFirstInvalidFile: false 
    }, 
    multiple: false 
}).on('submitted', function (event, id, filename) {  
    alert('submitted from ' + @counter); 
}).on('complete', function (event, id, filename, responseJSON) { 
    var element = $("li[qq-file-id=" + id + "] .qq-upload-status-text");  
    element.html("Success"); 
    alert('complete individual from ' + @counter); 
}).on('allComplete', function (succeeded, failed) {  
    alert('ALL complete from ' + @counter); 
}).on('error', function (event, id, name, errorReason, xhr) {  
    alert('Error[@(counter)]: ' + errorReason); 
}); 

Nach dynamisch 2 Upload-Steuerelemente meine Form zugab und Buchung:

$('#files-upload0').fineUploader('uploadStoredFiles'); 

$('#files-upload1').fineUploader('uploadStoredFiles'); 

$('#@formId').submit(); 

Ich sehe diese Daten bilden, wenn ich mit dem Upload einreichen steuert: .

Ich habe an der Setform Dokumentation sah, obwohl ich nicht sicher bin, wie man es benutzt: setForm und ich frage mich, wenn ich benötige noch die onComplete Veranstaltungen usw.

Auch wenn der Draht Format Idee für die serialisierte Sammlung, wo würde ich die Eigenschaftsnamen für die eingehenden Dateien ändern? Zum Beispiel denke ich, dass ich eine qqfile [0] .HttpPostedFile, qqfile [0] .ContentLength, qqfile [0] .InputStream usw. haben müsste, damit der Serializer die Eigenschaften assoziieren und zuweisen kann. Mit dem, was gerade gepostet wird, scheinen nur die 2. Datei-Upload-Details (llama.jpg) über den Draht zu kommen. Macht das, was ich zu erklären versuche, Sinn, oder kannst du dir einen einfacheren Weg vorstellen?

Answer 1

Mit der API-Methode setForm können Sie Fine Uploader an ein bestimmtes Element <form> anhängen.Dies ist nützlich, um ein Formular zu registrieren, das nicht vorhanden war, als die Fine Uploader-Instanzen erstellt wurden oder wenn sich Ihr Zielformular geändert hat.

Zum Beispiel:

var uploader = new qq.FineUploader({}); 
uploader.setForm(document.querySelector('form')) 

Weitere Details finden Sie auf der form feature page auf der Dokumentations-Website.