| 

.NET C# Java Javascript Exception

2
Also, es gibt einen Webserver und einen Imageserver.
Auf dem Webserver soll man Klick machen können und es öffnet sich ein Form-Field für Datei-Upload (funktioniert, ist ja auch kein Kunststück).
Klickt der User jetzt auf Upload, soll das Bild an den Imageserver gesendet werden. Der verarbeitet das dann und returnt irgendwas.
Jetzt hab ich mir gedacht ich könnt z.B. unter jQuery einfach ein
$.post('beispiel.de/script.php', {
image: $('#image').val()
}, function(data){
alert(data);
});

raushauen und das läuft. Natürlich zu kurz gedacht. Damit sende ich dem Imageserver nur den Namen der Datei. Wie krieg ich das Bild an JavaScript bzw. in diesem Fall an jQuery übergeben?

Die Frage ist auch, was muß ich im
<form action="?" ...>...</form>

für das ? eintragen. Wenn ich da beispiel.de/script.php eingebe, springt er danach auf die URL um. Sobald ich da ein javascript:void(0); eintrage schießt der Upload natürlich ins Leere.
Also irgendwie raff ich grad nicht, wie ich HTML dran hinder auf die Action-Url zu springen und stattdessen mit Ajax die Daten zu senden und den return zu catchen.

Hat da jemand ne grundlegende Idee zu?
(Die Antwort "jQuery hat doch schon ein Datei-Upload-Plugin" zählt nicht, ich wills selbst coden)
News:
26.07.2011
lunatigs 1,3k 2 8
2 Antworten
1
Hallo lunatigs,

als Vorabinfo: du kannst ein Form-Submit unterbinden, indem du als Event-Handler für das onsubmit Event der Form eine Funktion übergibst, die return false als Rückgabe hat. Mit jQuery würde das so aussehen:
$("form").bind("submit", function (event) {
//entweder über das Event-Objekt von jQuery
event.preventDefault();
//oder auf dem herkömmlichen Weg
return false;
})


In der Funktion kannst du dann auch die Formulardaten per JS einsammeln und über einen Ajax Request versenden. Zu dem Dateiupload kann ich dir einen Workaround anbieten, da ich selber mal nach einer eigenen Lösung gesucht habe.
Ich habe es letztendlich über ein verstecktes iFrame gelöst.
Ich fange das Submit der Form ab, füge per jQuery ein iFrame ins DOM ein und übergebe der Form als "target" das iFrame. In dem iFrame wird dann die action der Form geladen, also ein Script das den Fileupload verarbeitet. Für einen Callback nach erfolgreichem Upload kannst du im iFrame eine JavaScript-Funktion aufrufen, die über
parent.myCallback ();
den entsprechenden Callback aufruft.
Dies mal als Denkanstoß, da du selber coden willst überlasse ich dir die Implementierung.
26.07.2011
codeliner 73 5
gefällt mir schon ganz gut, allerdings wird - soweit ich weiß - das parent.myCallback(); mittlerweile von den meisten browsern als cross-site scripting geblockt.
lunatigs 27.07.2011
naja, egal, ich leg das upload-script jetzt einfach mit auf den webserver und übergeb das bild dann unter php mit curl an den imageserver. ist zwar umständlicher als ich es eigentlich vor hatte, aber so dürfte es gehen.
lunatigs 27.07.2011
Oh sorry, dass dein image-Server unter einer anderen Domain erreichbar ist, hatte ich gar nicht auf dem Schirm. In dem Fall würde es wirklich nicht funktionieren. Aus denselben Sicherheitsgründen kann man übrigens auch kein Bild direkt per JavaScript an einen Server senden, daher der Umweg über das iFrame. Es gibt auf jeden Fall auch eine Flash-Variante. Damit kenne ich mich aber nicht aus, das wäre nochmal eine neue Frage wert.
codeliner 27.07.2011
1
Mit HTML5 und XMLHttpRequest2 bzw. der FileAPI kann man eine Datei binär via AJAX Request hochladen. Alle aktuellen Browser können das (aber eben nicht die älteren, für die man dann eine Alternative bräuchte).

http://www.html5rocks.com/en/tutorials/file/xhr2/

Da steht auch wie das über Domain-Grenzen hinweg funktioniert (CORS). Ansonten einfach mal nach "HTML5 FileAPI" oder "HTML5 XMLHttpRequest2" suchen und ausprobieren.
31.07.2011
PHPGangsta 797 2 4
danke für die option. schau ich mir mal an.
lunatigs 03.08.2011

Stelle deine Javascript-Frage jetzt!