Datei-Upload mit weiteren Input Feldern in einem form-Element
0 1 
molily
Datei-Upload mit weiteren Input Feldern in einem form-Element
Hey Leute, ich habe eine kleine Frage:
Ich möchte meinen Website Besuchern ein Formular anbieten, wo sie Daten hochladen können.
Das Hochladen ist ja recht einfach mit ajaxForm. Das Problem, oder die Schwierigkeit ist aber, dass ausser dem input Feld für den File noch weitere Input Felder benötigt werden, wo der User seinen Namen eintragen kann, und noch weitere Details.
Ist es möglich, das alles in einem Formular(<form>-tag) zu packen? Es ist ja nämlich so, dass die Datei die der User hochladen möchte ja auf dem Server gespeichert werden muss, da ich ihm einblenden möchte, welche Datei er hochgeladen hat und wie groß sie war. Quasi wie bei GMail. Da kann man ja auch ausfüllen, an wen die Mail geht, Betreff eingeben, und Text. Ausserdem kann man auch beliebig viele Dateien hochladen.
Nur ist es so, dass die Dateien nicht hochgeladen werden, solange ich nicht auf submit klicke.
Als workaround könnte ich mir vorstellen, die Dateien die er hochladen möchte mit ajax zu schicken. Klickt er dann auf submit würde ich einfach nur noch die InputFelder, wo er seinen Namen und weitere Details eingeben musste zum Server übertragen. Weil die Daten hat der Server ja schon.
Hoffe ist halbwegs verständlich erklärt.
Danke im voraus.
-
Das Hochladen ist ja recht einfach mit ajaxForm.
Das Hochladen geht mit Form+Request. Ajax ist _eine_ Übertragungsmethode. Zeig mal, was Du hast.
Ist es möglich, das alles in einem Formular(<form>-tag) zu packen?
Ja. Das Formular muss eben den richtigen enctype haben (enctype="multipart/form-data").
Nur ist es so, dass die Dateien nicht hochgeladen werden, solange ich nicht auf submit klicke.
Nun, das ist das Standardverhalten einer html form + submit button. Wie möchtest Du es denn realisieren? Welches Javascript verwendest Du?
Als workaround könnte ich mir vorstellen, die Dateien die er hochladen möchte mit ajax zu schicken. Klickt er dann auf submit würde ich einfach nur noch die InputFelder, wo er seinen Namen und weitere Details eingeben musste zum Server übertragen. Weil die Daten hat der Server ja schon.
Hm, warum nicht das js so erweitern, dass auch die anderen input felder gesendet werden. Gehen tut das.
Du musst:
- mal zeigen, was Du für einen Ajax-Form-JS-Script nutzt.
- dir überlegen, wann der Submit ausgelöst werden soll und ob das Verhalten deines Formulars intuitiv ist.
Cheers,
Baba-
Das Hochladen geht mit Form+Request. Ajax ist _eine_ Übertragungsmethode. Zeig mal, was Du hast.
Richtig, ajax ist eine Datenübertragungstechnik.
Ist es möglich, das alles in einem Formular(<form>-tag) zu packen?
Ja. Das Formular muss eben den richtigen enctype haben (enctype="multipart/form-data").Nein, ich glaube nicht. Klar könnte man theoretisch das gesamte Formular mitschicken. Das wäre aber unnötiger Overhead, da NUR das Input Feld mit dem File interessant ist. Daher würde ich es so machen, dass ein Formular für die persönlichen(Name,...) Eingaben ist.
Und das andere Formular dafür da ist, die Files, die der User wählt hochzuladen.Du musst:
- mal zeigen, was Du für einen Ajax-Form-JS-Script nutzt.
- dir überlegen, wann der Submit ausgelöst werden soll und ob das Verhalten deines Formulars > intuitiv ist.
Ich benutze jQuery Form Plugin von http://malsup.com/
-
Ist es möglich, das alles in einem Formular(<form>-tag) zu packen?
Ja. Das Formular muss eben den richtigen enctype haben (enctype="multipart/form-data").
Nein, ich glaube nicht.Ist aber so.
Klar könnte man theoretisch das gesamte Formular mitschicken. Das wäre aber unnötiger Overhead, da NUR das Input Feld mit dem File interessant ist.
Wenn nur das file feld interessant ist, spar die die Inputfelder gleich!
Aber ich versteh langsam, was du willst. Nur ist das mit dem overhead die falsche Argumentation. Ein POST request spart Ressourcen! Du machst zwei. Der Vorteil Deines Ziels aber ist usability: die Zeit des Hochladens kann zum Eintippen der Details genutzt werden.
Cheers,
Baba
-
Hallo,
Als workaround könnte ich mir vorstellen, die Dateien die er hochladen möchte mit ajax zu schicken. Klickt er dann auf submit würde ich einfach nur noch die InputFelder, wo er seinen Namen und weitere Details eingeben musste zum Server übertragen. Weil die Daten hat der Server ja schon.
Ja, das ist sinnvoll.
Such einfach mal nach »Ajax« bzw. »XMLHttpRequest File Upload«
http://blog.checkdomain.de/programmierung/html5-file-api-formdata-und-xmlhttprequest2/
http://www.html5rocks.com/en/tutorials/file/xhr2/
http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/
http://robertnyman.com/2013/02/11/using-formdata-to-send-forms-with-xhr-as-keyvalue-pairs/Zum Hintergrund:
</archiv/2011/3/t204009/#m1380767>Heutzutage lässt sich das FormData-Objekt verwenden. Für Browser, die FormData nicht unterstützen, kannst du entweder einen Iframe als Formular-Target verwenden oder die Dateien normal mit dem Formular schicken.
Man kann auch auch progress-Events hören, um eine Progressbar für den Upload anzuzeigen.
Ist es möglich, das alles in einem Formular(<form>-tag) zu packen?
Kannst du machen, aber du musst dann darauf achten, dass das <input type="file"> entfernt oder deaktiviert wird, wenn das Formular abgesendet wird und vorher bereits ein XHR-Upload erfolgreich war.
Ich verwende immer ein separates Formular, damit der File-Upload in älteren Browser in ein iframe geleitet werden kann und die restlichen Formulardaten vom File-Upload getrennt sind.
Mathias