nicht angemeldet
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