Archivlink: javarea.de Forum > JavaScript > Upload-Box zeigen
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Upload-Box zeigen

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von AlexD am 15.11.2008 - 13:25
Hallo,

ich hab folgende Idee aber leider keinen wirklichen Lösungsansatz.

Wenn ein User eine Datei hochlädt, soll wärend der Übertragung einfach eine Box (z.B. div-Box mittig im Bildschirm positioniert) erscheinen mit "Datei wird hochgeladen! Bitte warten.... und animiertes GIF zum verdeutlichen"

Es geht mir einfach nur darum, dass der User sieht, es passiert was. Denn sonst bekommt er vielleicht gar nicht mit, dass die Übertragung schon begonnen hat und klickt x-mal auf den 'hochladen'-Button.

Hat da jemand eine Idee?!

[EDIT]
hab jetzt mal folgenden Lösungsansatz (zugegeben ein sehr einfacher Ansatz):

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

<script type="text/javascript">
<!--

function showUploadBox (){
    document.write("<div><p>Die Datei wird hochgeladen!<br>Bitte warten...</p></div>");
}
//-->
</script>


Und wenn ich auf entsprechenden Button klicke einfach mit "onClick="showUploadBox()" die Funktion aufrufen.

Das klappt soweit auch, jedoch wird es auf einer neuen Seite dargestellt und nicht auf der aktuellen Seite quasi eingeblendet.

Denke das 'document.write' is wohl hier nicht das, was ich dazu bräuchte...
[/EDIT]

Gruß
Alex

geschrieben von Micha am 15.11.2008 - 15:01
Hi,

genau. document.write ist hier falsch. Nutze ein Blind-Tag (zb leeres DIV), welches Du via innerHTML mit Text füllst.

Beispiel:
HTML-Quelltext
1: 

<div id="uploadMessage"></div>


und

HTML-Quelltext
1: 
2: 
3: 

function showUploadBox (){
    document.getElementById("uploadMessage").innerHTML("Die Datei wird hochgeladen!<br>Bitte warten...");
}


Gruß Micha

geschrieben von AlexD am 15.11.2008 - 15:55
Hi Micha,

danke für die schnelle Antwort.

Irgendwie klappt das noch nicht so ganz.
Im Moment passiert hier noch gar nix.... irgendwo is da wohl noch ein Fehler.

das mit dem onclick="showUploadBox" im Submit-Button ist schon richtig?!

Ansonsten hab ich die Funktion und DIV so übernommen wie Du sie gepostet hast.
Hab mich auch nicht vertippt...

hier mal ein Link zur Test-Seite.... hier wird zwar keine Datei hochgeladen, aber trotdem sollte die Box kurz angezeigt werden.
einfach mal auf 'absenden' klicken

http://privatwebarea.dyndns.org/ent....e/test.php

geschrieben von Micha am 15.11.2008 - 18:33
Hi,

sry, mein Fehler. innerHTML ist keine Funktion, die Parameter erwartet. So sollte es gehen

HTML-Quelltext
1: 

document.getElementById("uploadMessage").innerHTML = "Die Datei wird hochgeladen!<br>Bitte warten...";


Micha

geschrieben von AlexD am 16.11.2008 - 12:04
hi Micha,

ja was so ein = Zeichen nicht alles bewirken kann....

nun funktioniert es genau so wie ich mir das vorgestellt hab (siehe Link oben)!!

Danke für die super schnelle Hilfe!!

geschrieben von Micha am 16.11.2008 - 12:09
Hi,

keine Ursache. Du solltest aber die chkFormular und die showUploadBox zusammenlegen. Wenn ich den Haken weg mach, bekomme ich einen Ladebalken angezeigt.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 

function chkFormular () {
  if (document.absenden.anmeldebedingungen.checked == false) {
    document.getElementById("uploadMessage").innerHTML = "";
    alert("Bitte Ihren Namen eingeben!");
    document.absenden.anmeldebedingungen.focus();
    return false;
  }
  else {
      document.getElementById("uploadMessage").innerHTML = "<p class=\"style_uploadbox\">Die Datei wird hochgeladen!<br><img src=\"./img/upload.gif\"><br>Bitte warten...</p>";
      retrun true;
  }
}

geschrieben von AlexD am 16.11.2008 - 14:59
hey,

die test.php ist nur ein "Allestester", da teste ich einfach immer die einzelnen Fuktionen bevor ich diese irgendwo einbau.

Die checkbox hat in diesem Fall dann nix mit dem Hochladen zu tun....

Aber ich hab wohl irgendein Problem beim FireFox (3.0.4)....
Auf der Testseite funktioniert das einwandfrei, im implementierten Zustand hakt es irgendwie.

Es geht genauer gesagt um das Hochladen von Attachments für eine E-Mail.

Da kann ich z.T. nicht mehr auf den "hochladen" Button klicken und auch der Durchsuchen-Button hängt auch, vor allem wenn ich eine weitere Datei anhängen möchte.

IE7 und Opera 9 funktionieren soweit ich das jetzt gesehen hab einwandfrei.
Safari (ok der WYSIWYG geht nicht) hat aber wohl das gleich Problem wie der FireFox.



Hier einfach mal der Link dazu (Entwicklungsseite) => E-Mail schreiben
http://privatwebarea.dyndns.org/ent....tartseite/

online Seite, hier ist das noch nicht integriert und funktioniert ganz normal
http://startseite.dyndns.org

Benutzername: *** entfernt ***
Kennwort: *** entfernt ***

Besten Gruß
Alex

geschrieben von Micha am 16.11.2008 - 15:46
Hi,

ich als Opera Fan habe, wie ich gerade festgestellt habe, kein Firefox auf meinem privaten PC installiert. Bekommst Du einen Fehler in der Konsole vom FF?

Micha

geschrieben von AlexD am 16.11.2008 - 17:46
Mir persönlich gefällt der Opera auch sehr sehr gut!!
Doch leider ist der FF nach dem IE wohl der meist genutzte Browser.

Hab grad in der Fehler-Konsole des FireFox nachgesehn.


Bis auf ein paar CSS-Warnungen ist nichts in der Konsole zu finden gewesen.
Die CSS-Warnungen kommen vom Script der Wetter.com Buttons.

JS-Fehler sind hier nicht zu finden.

Was mir auch aufgefallen ist, die Grafik, also der Ladebalken wird beim FF nicht angezeigt wenn er mal hochlädt.

Hm... Opera zickt doch auch ein wenig rum.... ähnliches Verhalten wie FF und Safari. Nur beim IE7 konnte ich bisher das Verhalten noch nicht feststellen, jedoch wird auch beim IE7 die Grafik nicht angezeigt.

hier noch der extakte Code wie ich das Script eingebaut hab (entsprechende Abschnitte)

aus der CSS-Datei
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 

.pos_uploadbox{
    position:fixed;
    left:40%;
    top:50%;
    width:300px;
    height:150px;
}

.style_uploadbox{
    border:1px solid;
    border-color:#000000;
    background-color:#550000;
    padding:5px;
    font-size:0.9em;
    text-align:center;
}


Im Script selbst
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 

<script type="text/javascript">
<!--
function showUploadBox (){
    document.getElementById("uploadMessage").innerHTML=("<p class=\"style_uploadbox\">Die Datei wird hochgeladen!<br><img src=\"./img/upload.gif\"><br>Bitte warten...</p>");
}
//-->
</script>

<div class="pos_uploadbox" id="uploadMessage"></div>

// --- Dateiuploadfeld und 'hochladen'-Button
<input class="input" type="file" name="datei" size="40">&nbsp;&nbsp;&nbsp;<input class="button" type="submit" onClick="showUploadBox ()" name="mailanhang" value="hochladen">


Du kannst gerne mit dem Gast-Zugang ein wenig rumtesten!!

geschrieben von Micha am 16.11.2008 - 20:32
Hi,

vll solltest Du das Bild vorladen?! Andere möglichkeit. Du könntest den Submit via JS ausführen, wenn das Bild geladen ist.

Ich habe es nicht getestet aber ich stelle mir das so vor:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 

var img = new Image(100,300); // Maße des Bildes
img.src = "pfad/zum/bild.ext";
img.onload = function(e) {
   alert("Bilder fertig geladen, jetzt darf das Formular erst abgeschickt werden!");

};

document.getElementById("uploadMessage").appendChild( img );


Versuchs mal.

Gruß Micha

geschrieben von AlexD am 16.11.2008 - 21:28
Also....

wenn ich das so einbinde, läuft mir der IE in eine Schleife.... die 'alert'-Meldung kommt immer wieder, so schnell kann ich die gar nicht wegklicken.

Bin wieder zurück auf die alte Version gegangen.

Und ich hab das Problem gefunden warum ich z.T. keinen Button mehr anklicken konnte.

Lach mich bitte nicht aus, aber ich hab eine DIV-Box mit einer bestimmten Größe über die Seite gelegt.... die quasi unsichtbar war und über den Buttons lag wenn man ein Stück zu weit gescrollt hat. Lass jetzt die Größe erst angeben über eine DIV-Box, die in die Box mit der ID reingeladen wird.

Das funktioniert nun soweit sehr gut.
Nur das animierte Bild (Laufleiste) wird beim IE und FF dann eben nicht angezeigt....

geschrieben von Micha am 16.11.2008 - 21:38
Hi,

dieses 08/15 Beispiel macht zumindest in meinem IE (und natürlich Opera), was ich dachte:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 

<html>
<script>
window.onload = function() {


	var img = new Image(150,105);
	img.onload = function(e) {
		alert("Geladen!");
	}
	img.src = "http://www.google.de/images/nav_logo3.png";
	document.getElementById("foo").appendChild(img);
}
</script>


<div id="foo"></div>

</html>


Wie oft kommt bei Dir die Box?

geschrieben von Micha am 16.11.2008 - 21:51
Hi,

ums noch etwas detaillierter zu machen:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 

<html>


<script>

function showProgressBars(f) {
	var img = new Image(150,105);
	img.onload = function(e) {
		f.submit();
	}
	img.onerror = function(e) {
		f.submit();
	}
	img.src = "http://www.google.de/images/nav_logo3.png";
	document.getElementById("foo").appendChild(img);

}


window.onload = function() {

	var form = document.forms[0];
	form.onsubmit = function(e) {
		showProgressBars(this);
		return false;
	}


}
</script>


<div id="foo"></div>

<form action="#">
<input type="submit" value="Absenden">
</form>

</html>


Versuch das mal anzupassen mit Deinem Upload-Dialog. Versuchs bitte nur in diesem Beipspiel und nicht auf der Seite, da hier andere Effekte ausgeschlossen werden können.

Micha

geschrieben von AlexD am 17.11.2008 - 16:04
Hi Micha,

vielen lieben Dank!!

Ich werd mich da wohl noch ein wenig spielen dürfen.

Hab Übergangsweise das Image im <Body> mit onload vorgeladen... nun wird es auch von IE und FF korrekt angezeigt.

Hab mir auch bei Amazon gleich noch ein Buch über JS bestellt.... denn ich weiß jetzt echt nicht so recht wie ich die DIV-Box und den Text da richtig zum Ladebalken dazu bekomme.



Es lassen sich viele Dinge mit JS realisieren, jedoch möchte ich nicht ein Forum dazu benutzen mir von jemanden fertigen Code erstellen zu lassen und ich ihn nur einbau.... das ist nicht Sinn und Zweck eines Forums. Was JS angelangt scheitert es wohl an elementaren Dingen bei mir.
Hab mich bisher immer vor JavaScript gedrückt.

Besten Gruß
Alex

geschrieben von Micha am 17.11.2008 - 19:50
Hi,

SELFHTML hat ein sehr gutes Kaptiel zum Thema JS. Man muß sich zwar reinlesen und mitunter auch ein wenig Zeit investieren aber es lohnt sich und würde nichts kosten.

Ansonsten bist Du hier im Forum natürlich herlich willkommen, Deine Probleme kund zu tun

Viel Erfolg
Micha


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.