Alternative zu einem Ajax-Upload-Formular verschachtelt in einem anderen Formular

Question

Ich habe ein HTML-Formular, um die Details einer Person in einem Datenbanksystem zu bearbeiten, das ich an meinem Arbeitsplatz habe. Ein Teil des Formulars ermöglicht es dem Benutzer, ein Bild der Person hochzuladen. Das bereitet mir jedoch Schwierigkeiten, weil ich versuche, das Formular mehr Ajax-y zu machen, indem ich dem Nutzer das Bild hochlade und sehe, dass es erfolgreich hochgeladen wurde, bevor die Daten der Person zum Speichern übermittelt werden. Der Teil, der mir Mühe hat zu geben ist, dass es eine verschachtelte Form notwendig zu machen scheint (das heißt, die Upload-Formular innerhalb der Details bilden), etwa so:

<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
    <input type="submit"> 
</form> 

So wie ich bin der Hoffnung, es zu machen Arbeit ist, dass Der Benutzer würde die Details des Formulars ausfüllen, ein Bild auswählen und auf die Schaltfläche "Hochladen" klicken, dann ein AJAX-Update durchführen, wenn die Datei hochgeladen wurde, damit sie das Bild sehen können, bevor sie die finale Schaltfläche "Abschicken" drücken.

Gibt es eine gute Möglichkeit, um das Upload-Formular "innerhalb" der Details Formular (zumindest im Aussehen auf der Seite), aber nicht in das Detailformular im HTML verschachtelt?

Answer 1

Sie dürfen keine ineinander verschachtelten Formulare in gültigem HTML-Code haben. Dateiuploads über XMLHTTPRequest-Objekte (die häufigste AJAX-Technik) funktionieren in den meisten Browsern nicht.

Alles ist jedoch nicht verloren. Für die AJAX-Uploads müssen Sie einen IFRAME verwenden, wie hier dargestellt: http://www.webtoolkit.info/ajax-file-upload.html

Der Ansatz, den ich für das Formular vorschlagen würde, ist es in drei form Elemente zu teilen. Sie erhalten ein Formular mit den Feldern vor dem Upload-Formular, dem Upload-Formular und dem Formular mit den Feldern nach dem Upload-Formular. Das erste Formular hat keinen Senden-Button. Die Felder in der ersten Form werden in der dritten Form als versteckte Eingaben dupliziert. Wenn auf die Schaltfläche zum Absenden des letzten Formulars geklickt wird, wird Javascript ausgeführt, das die Felddaten vom ersten Formular in das dritte Formular kopiert, sodass es mit dem letzten Formular gesendet wird.

Zum Beispiel Ihre HTML könnte wie folgt aussehen ::

<form name="details1"> 
    <input id="fake_detail1" name="detail1" type="text"/> 
    <input id="fake_detail2" name="detail2" type="text"/> 
</form> 
<form name="pictureupload"> 
    <input type="file" name="pic"> 
    <input type="submit" name="upload" value="Upload"> 
</form> 
<form name="details2"> 
    <input id="detail1" name="detail1" type="hidden"/> 
    <input id="detail2" name="detail2" type="hidden"/> 
    <input id="detail3" name="detail3" type="text"/> 
    <input type="submit"> 
</form> 

Answer 2

Sie können an einer anderen Stelle auf der Seite der „verschachtelten“ Formular platzieren und es nur zeigen, wenn der Benutzer auf einen „Upload Bild klickt. .." Taste.

Die verschachtelte Form ist möglicherweise anfangs nicht sichtbar. Es gibt einige sehr nette Popups, mit denen Sie das verschachtelte Formular über das äußere Formular anzeigen können und dem Benutzer das verschachtelte Formular unabhängig hochladen können.

<div id="nestedform"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
</div> 

<div id="mainform"> 
<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <a href="#" onclick="Code to pop up the nested form">Upload Picture...</a> 
    <input type="submit"> 
</form> 
</div>