value von input type=file verwenden / Fileupload mit AJAX

[Felix Riesterer]

Liebe JavaScript-Spezialisten,

ich bastle mir gerade eine Art "online Windows Explorer", um für die Fälle gerüstet zu sein, in denen ich gerade kein FTP oder SCP zur Verfügung habe, und in denen ich mal eben auf die Schnelle etwas an den Dateien/Verzeichnissen einer Website verändern möchte.

Dazu habe ich mir ein Verzeichnis-Listing gebaut, das ich mittels AJAX nach Bedarf erweitere, um nicht immer das komplette Verzeichnis-Listing des DocumentRoot laden zu müssen.

Da ich schon mit AJAX arbeite, wollte ich auch Dateiuploads "mittels AJAX" gestalten, was aber bekanntlich nicht geht. Hierfür möchte ich stattdessen in einem IFrame ein "unsichtbares" Uploadformular eintragen, das den Upload erledigt, um anschließend den Iframe wieder zu "schließen" (Server-Antwort enthält passenden JS-Code).

Was ist jetzt mein Problem?

Um das Upload-Formular zu erzeugen, lese ich ein bereits vorhandenes Upload-Formular aus, welches sich auf der Seite selbst befindet und nicht abgeschickt werden soll, da sich ja ansonsten mein Verzeichnis-Listing von vorne lädt, was ich ja über diesen Umweg verhindern will.

Ich versuche also den value eines <input type="file" /> auszulesen und diesem einem neu erzeugten <input type="file" /> im Iframe zu verpassen. Und genau hier scheitere ich, je nach Browser an verschiedenen Stellen.

Firefox: Ich kann zwar ein <input type="file" /> dynamisch erstellen, jedoch lässt mich Firefox dessen value nicht beschreiben (security error 1000). Dort behelfe ich mir, indem ich die komplette Node (das file-input-Element) clone (myInput.cloneNode(true)), um es dann im Iframe einzupflanzen (myForm.appendChild(myInput)). Damit kann ich eine Datei mittels pseudo-AJAX hochladen.

Internet Explorer (heute Version 7): Das mit dem Clonen der Node klappt, aber das anschließende Einpflanzen quittiert mir der IE mit einem JavaScript-Fehler, den er nicht näher erläutert - er nennt das "ungültiges Argument". Das tut er immer, wenn eine Node aus einem "fremden" document entstammt. Daher muss ich im IE immer Nodes im "richtigen" document per createElement() erzeugen. ABER: Der IE lässt mich den value eines file-inputs auslesen und ohne Schwierigkeiten in ein neu erzeugtes hineinschreiben, was ja der Firefox mit einem security error 1000 verbietet.

Welche Ideen/Erfahrungen habt Ihr mit dem file-input? Insbesondere wüsste ich gerne von anderen Browsern, die ich gerade nicht testen kann...

Liebe Grüße aus Ellwangen,

Felix Riesterer.