Ladebalkeni Image Upload

Hauer

Hallo User.

Ich möchte gern ein Ladebalken auf meiner Seite haben, dass angezeigt wird, wenn ich Bilder per Upload auf den Server lade. Nun habe ich schon Stunden im Netz verbracht um mich mit Input zu versorgen. Aber jetzt komme ich nicht so recht weiter:

JavaScript:

Code

<script language="javascript" type="text/javascript">
function wait()
{
loader = new Image();
loader.src = "images/ajax-loader.gif";
window.document.images['loader'].src = loader.src;


document.getElementById("box").style.visibility = "visible";
return true;
}
</script>

Alles anzeigen

Form:

HTML

<form action="../backoffice/abc.php" method="POST" onsubmit="return wait();" enctype="multipart/form-data" />

Box:

HTML

<div id="box" class="box">
<table border="0" bgcolor="#ffffff" width="100%" cellspacing="0" style="padding:10px;margin:0px;">
<tr>
<td valign="top">
<img src="images/ajax-loader.gif" name="loader">
</td>
<td valign="middle" align="center">
<b>Upload... bitte warten!</b>
</td>
</tr>
</table>
</div>

Alles anzeigen

CSS:

Code

#box { 
background-color:#ffffff; 
border:1px solid #222222; 
position:relative; 
left:300px; 
bottom:1000px;
width:320px; 
padding:25px; 
margin:0px; 
visibility:hidden; 
}

Alles anzeigen

Das Window Element öffnet sich auch beim Absenden, aber leider ohne das animierte Gif. Es bleibt leer.

Gruß

Hauer

Ok, hab mir das noch mal angesen und es etwas einfacher gelöst:

Code

<script language="javascript" type="text/javascript">
function popup()
{
url = "popup.php"
file = window.open(url, "popup", "width=300, height=150");
return true();
win.focus();
}
</script>

HTML

<body>


        
        <table width="100%">

        <tr><td><center><br>Upload... bitte warten</b></center></td></tr>
        <tr><td><br></b></td></tr>
        <tr><td><center><img src="images/ajax-loader.gif"></center></td></tr>

        </table>



</body>

Alles anzeigen

Eine Anschlußfrage habe ich da noch.

Wenn die Elternseite mit dem Upload fertig ist und zum Bestätigungsseite wechselt, wie kann ich es erreichen, dass das Popup sich selbständig schließt.

Danke.

Hauer

So habe es nun doch selbst hinbekommen

Also auf der Seite A wird das Javascript ausgelöst:

Code

<script language="javascript" type="text/javascript">
function popup()
{
url = "popup.php"
var w = (screen.availWidth-300)/2;
var h = (screen.availHeight-150)/2;
file = window.open(url, "popup", "width=300, height=150, left=" + w + ", top= + h + ", "scrollbars=no,locationbar=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no");
return true();
win.focus();
}
</script>

Alles anzeigen

Auf der Seite B (hier die Bestätigungseite des Uploads) habe ich es wie folgt gemacht:

Code

<script language="javascript" type="text/javascript">
url = "popup.php"
var w = (screen.availWidth-300)/2;
var h = (screen.availHeight-150)/2;
var file = window.open (url, "popup", "width=300, height=150, left=" + w + ", top= + h + ", "scrollbars=no,locationbar=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no");
file.close();
if (file.closed == true) {
}else {
file.close();
}
</script>

Alles anzeigen

Vielleicht nicht sehr elegant, aber es funktioniert im IE, wie auch im Firefox.

Danke fürs zusehen :p

Ladebalkeni Image Upload

Tags

Benutzer online in diesem Thema