nicht angemeldet
Eingabefeld in ein Frame verschieben mit IE6
Hallo,
ich bin gerade dabei für ein Projekt eine Upload-Seite zu schreiben. Folgende Ziele will ich dabei umsetzen:
Auswahl mehreren Dateien
Upload im Hintergrund
Rückmeldung über den Uplaod-Fortschritt
Nach etwas googlen konnte ich dann acuh schon eine Seite erstellen die das alles erfüllt, zumindest im Firefox. Der Internet Explorer 6 weigert sich zur Zeit standhaft ein Eingabefeld von einer Seite in ein verstecktes IFrame zu verschieben.
Bevor ich Code poste erstmal kurz wie das ganze funktionieren soll.
Wurde mit einem Eingabefeld eine Datei ausgewählt, soll das Eingabefeld in ein Formular in einem IFrames verschoben werden.
Auf der Upload-Seite selbst wird eine Tabelle erzeugt in der alle ausgewählten Dateien aufgelistet werden und bei Bedarf aus der Auswahl gelöscht werden können.
Wird die Schaltfläche zum hochladen gedrückt, soll das Formular im IFrame abgeschickt werden. Die Liste mit den Dateinamen, das Eingabefeld und die Schaltfläche werden durch einen Fortschrittsbalken ersetzt.
Hier mal der Code wie er im Firefox funktioniert.
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/ui-lightness/jquery-ui-1.7.2.custom.css">
<style type="text/css">
.ui-progressbar { height:15px; width:200px; text-align: center; }
.ui-progressbar-value { background-image: url(./images/pbar-ani.gif); }
</style>
<script language="JavaScript" src="./scripts/jquery.js"></script>
<script language="JavaScript" src="./scripts/jquery-ui-1.7.2.custom.min.js"></script>
<script language="JavaScript">
<!--
$(function() {
var $frame = $('<iframe id="uplFrame" style="width:200px; height:100px;">');
$('#uplDiv').html( $frame );
$('<div id="garbage"></div>').appendTo('#uplDiv');
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<form id="uplForm" action="upload.jsp" method="POST" enctype="multipart/form-data"></form>');
}, 1 );
});
function addFile(Filename) {
var row = $('<tr></tr>');
var remove = $('<a><img src="./images/delete.png" /></a>');
var listItem = $('<td width="100%">' + Filename.value + '</td>');
$('<input type="file" name="File1" value="" onchange="javascript:addFile(this)"/>').insertBefore(Filename);
//$('#uplFrame').contents().find('#uplForm').append(Filename);
var $frame = $('#uplFrame');
var doc = $frame[0].contentWindow.document;
var $body = $('#uplForm',doc);
$body.append(Filename);
$('#fileList').append(row.append(listItem, $('<td>').append(remove, $('</td>'))));
remove.click(function() {
row.remove();
$('#garbage').append(Filename);
$('#garbage').empty();
});
}
//-->
</script>
</head>
<body>
<p align="center">
<table cellspacing="0" cellpadding="0" spacestyle="padding:0; margin:0; border-style:none; border-width:0">
<tr><td><img src="./images/platte_ol.jpg"></img></td><td style="background-image:url(./images/platte_oc.jpg); background-repeat:repeat-x; background-position:bottom"></td><td><img src="./images/platte_or.jpg"></img></td></tr>
<tr><td style="background-image:url(./images/platte_lc.jpg); background-repeat:repeat-y; background-position:right"></td>
<!-- Ab hier beginnt das Upload-Formular -->
<td align="center">
<div id="progressbar">
<table width="300" style="padding:0; margin:0; border-style:none; border-width:0">
<tr><td colspan="2" align="center"><input type="file" name="File1" id="File1" value="" onchange="javascript:addFile(this)"/></td></tr>
<tr><td colspan="2" align="center"><table width="80%"id="fileList" cellspacing="0" cellpadding="0" spacestyle="padding:0; margin:0; border-style:none; border-width:0"></table></td></tr>
<tr><td colspan="2" align="center"><input id="startUpl" type="button" value="Upload starten" onClick="javascript:startUpload()"/></td></tr>
</table>
</div><br />
<div id="uplDiv" style="visibility:visible; width:200px; height:10 0px;"></div>
</td>
<!-- Ende des Upload-Formulars -->
<td style="background-image:url(./images/platte_rc.jpg); background-repeat:repeat-y; background-position:left"></td></tr>
<tr><td><img src="./images/platte_ul.jpg"></img></td><td style="background-image:url(./images/platte_uc.jpg); background-repeat:repeat-x; background-position:top"></td><td><img src="./images/platte_ur.jpg"></img></td></tr>
</table>
</p>
</body>
</html>
Wie man erkennen kann verwende ich jQuery für die DOM-Manipulation.
Das IFrame wird erst zur Laufzeit erstellt, ich habe es noch nicht geschafft das IFrame zu ändern wenn es bereits in der Seite existiert.
Der Garbage-Container wird benötigt um Eingabefelder wieder zu löschen, dass direkte löschen im IFrame klappt nicht.
Hier mal die Fehlermeldung des IE6.
Zeile: 11
Zeichen: 11746
Fehler: Ungültiges Argument
Code: 0
URL: http://localhost:8080/upload.jsp
Leider hilft mir die Fehlermedung nicht wirklich weiter, aber ich konnte sie durch rumprobieren, auf die Zeile
$body.append(Filename);
in der Function addFile eingrenzen.
Habt ihr eine Idee wie ich den IE6 dazu überreden kann das Eingabefeld in das IFRame zu verschieben?
MfG
Marco
-
Hi,
Wurde mit einem Eingabefeld eine Datei ausgewählt, soll das Eingabefeld in ein Formular in einem IFrames verschoben werden.
Und das soll im FF funktionieren - unter Beibehaltung der bereits getroffenen Datei-Auswahl? Würde mich stark wundern.
Auf der Upload-Seite selbst wird eine Tabelle erzeugt in der alle ausgewählten Dateien aufgelistet werden und bei Bedarf aus der Auswahl gelöscht werden können.
Wird die Schaltfläche zum hochladen gedrückt, soll das Formular im IFrame abgeschickt werden.Das "Verschieben" von Formularfeldern klingt mir generell stark fehleranfällig.
Du kannst ein Formular aus dem Hauptdokument auch "an" einen Iframe absenden, mit Hilfe des target-Attributes - das erscheint mir der weitaus zuverlässigere Weg.Hier mal die Fehlermeldung des IE6.
Fehler: Ungültiges ArgumentLeider hilft mir die Fehlermedung nicht wirklich weiter, aber ich konnte sie durch rumprobieren, auf die Zeile
$body.append(Filename);
in der Function addFile eingrenzen.DOM-Knoten gehören immer zu einem Dokument. Du kannst sie nicht einfach so von einem Dokument ins andere "verschieben". (Ich wundere mich schon wieder, dass der FF das angeblich mitmachen soll.)
Normalerweise braucht es dafür importNode, um den Knoten erst mal ins andere Dokument zu importieren, bevor du ihn dort einhängen kannst; das wiederum kennt der IE aber IIRC auch erst ab Version 8.Ich halte das aktuell gewählte Konzept für zweifelhaft und wenig zielversprechend - und würde es eher wie oben beschrieben angehen.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
Und das soll im FF funktionieren - unter Beibehaltung der bereits getroffenen Datei-Auswahl? Würde mich stark wundern.
Jepp das funktioniert, wundert mich auch. Ich hab es auch eher durch Zufall entdeckt. Ich hatte jetzt erst gedacht das jQuery da was spezielles macht, aber es geht tatsächlich auch mit 'normalem' Javascript.
Das "Verschieben" von Formularfeldern klingt mir generell stark fehleranfällig.
Du kannst ein Formular aus dem Hauptdokument auch "an" einen Iframe absenden, mit Hilfe des target-Attributes - das erscheint mir der weitaus zuverlässigere Weg.Kannst du mir dass mal näher erklären? Ich weiß jetzt nicht ob es zu dem passt was ich machen will.
DOM-Knoten gehören immer zu einem Dokument. Du kannst sie nicht einfach so von einem Dokument ins andere "verschieben". (Ich wundere mich schon wieder, dass der FF das angeblich mitmachen soll.)
Normalerweise braucht es dafür importNode, um den Knoten erst mal ins andere Dokument zu importieren, bevor du ihn dort einhängen kannst; das wiederum kennt der IE aber IIRC auch erst ab Version 8.Ok leuchtet mir ein werde ich mal mit herumspielen. Ich glaube ich habs auch schon einmal im IE6 verwendet, weiß ich jetzt aber auch nicht mehr so genau
Ich halte das aktuell gewählte Konzept für zweifelhaft und wenig zielversprechend - und würde es eher wie oben beschrieben angehen.
MfG ChrisB
Danke fürs Antworten und Gruß zurück :)
-
Hi,
Das "Verschieben" von Formularfeldern klingt mir generell stark fehleranfällig.
Du kannst ein Formular aus dem Hauptdokument auch "an" einen Iframe absenden, mit Hilfe des target-Attributes - das erscheint mir der weitaus zuverlässigere Weg.
Kannst du mir dass mal näher erklären? Ich weiß jetzt nicht ob es zu dem passt was ich machen will.http://de.selfhtml.org/html/formulare/definieren.htm#zielfenster
Ich weiss gerade nicht, was ich da noch viel "näher erklären" könnte.
Du behältst Formular und Eingabefelder im Hauptdokument, fügst auch dort neue Felder hinzu, wenn erforderlich.
Beim Abschicken gehen die Daten dann auf Grund des target-Attributes "in" den Iframe, d.h. die Serverantwort wird vom Browser in diesem bereitgestellt.
"Ab wann" du dann mit JavaScript wieder Zugriff auf's Hauptdokument hast, um dort ggf. den Fortschritt zu visualisieren, müsstest du ausprobieren. Ich denke aber nicht, dass dieses blockiert werden dürfte, so lange der Upload läuft.MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-