Bild nachladen

[nico]

Einen wunderschönen guten Morgen,

ich hätte da so ein Anliegen. Vorneweg ich habe absolut keinen blassen Schimmer von der Materie Ajax/Javascript, da ich mich mehr mit HTML und PHP beschäftige. Daher weiß ich auch nun nicht ob ich im richtigem Forum gelandet bin.

Aber nun zu meinem kleinen Problem:

Ich habe ein Formular welches mit PHP die Bilder hochlädt, klein aber fein.
Dennoch sollen die Bilder neben her angezeigt werden im Reload nach ändern des Links in der Datenbank
Es sollte natürlich nicht gleich die ganze Seite neuladen, sondern wie beschrieben nur die Bilder. Ich habe da zwar wie gesagt schon ein paar gefunden nur ist mir bis dahin auch noch nicht klar ob ich für jeden img tag eine neues script haben muss oder ob man da nicht irgendwie in kombination zu php arbeiten kann. Da die Links direkt aus der Datenbank abgefragt werden.

<form action="<? $_SERVER['PHP_SELF'] ?>" method="post" enctype="multipart/form-data">  
<table border=0 cellspacing=0 cellpadding=0 widht=765 nof=LY>  
<tr valign=top align=left>  
	<td>Box Header:&nbsp;</td>  
	<td><input type="file" size="20" name="hbu" />&nbsp;</td>  
	<td>Derzeit:&nbsp;<img id="meinbild" src="../<? echo("$header_boxes")?>" width="100" height="16">&nbsp;</td>  
    <td><input type="submit" name="hb" value="Ändern" /></td>  
</tr>  
<tr valign=top align=left>  
	<td>Box Hintergrund:&nbsp;</td>  
	<td><input type="file" size="20" name="bgbu" />&nbsp;</td>  
	<td>Derzeit:&nbsp;<img id="bild" src="../<? echo("$bg_boxes")?>" width="100" height="16">&nbsp;</td>  
    <td><input type="submit" name="bgb" value="Ändern" /></td>  
</tr>  
<tr valign=top align=left>  
	<td>Nav-Button:&nbsp;</td>  
	<td><input type="file" size="20" name="nbu" />&nbsp;</td>  
	<td>Derzeit:&nbsp;<img id="Bild" src="../<? echo("$nav_butt")?>" width="100" height="16">&nbsp;</td>  
    <td><input type="submit" name="nb" value="Ändern" /></td>  
</tr>  
<tr valign=top align=left>  
	<td>Nav-Button klein:&nbsp;</td>  
	<td><input type="file" size="20" name="nb2u" />&nbsp;</td>  
	<td>Derzeit:&nbsp;<img id="bild" src="../<? echo("$nav_butt2")?>" width="100" height="16">&nbsp;</td>  
    <td><input type="submit" name="nb2" value="Ändern" /></td>  
</tr>  
<tr valign=top align=left>  
	<td>Header:&nbsp;</td>  
	<td><input type="file" size="20" name="hu" />&nbsp;</td>  
	<td>Derzeit:&nbsp;<img id="bild" src="../<? echo("$header")?>" width="100" height="16">&nbsp;</td>  
    <td><input type="submit" name="h" value="Ändern" /></td>  
</tr>  
</table>  
</form>

  
<?  
if(isset($_POST['hb']))  
{  
    if (!empty($_FILES['hbu']))  
        {  
        move_uploaded_file($_FILES['hbu']['tmp_name'],  
        './uploaded/'.$_FILES['hbu']['name']);  
        $abfrage= "UPDATE $admintable SET header_boxes='./admin/uploaded/".$_FILES['hbu']['name']."'";  
        mysql_query($abfrage) or die (mysql_error());  
        echo "Header-box erfolgreich hochgeladen";  
        }  
        else  
        {  
        echo "Die Header-Box konnte leider nicht gespeichert werden";  
        }

Da ich schon ne ganze weile am googlen bin und irgendwie nicht das passende gefunden habe, was wohl auch eine reine verständnis Frage bei völliger unwissenheit ist. Bitte ich hier um so ein paar kleine Gedanken anstöße
Also um das mal auf den Punkt zu bringen:

• Bei Seitenaufbau werden die Bilder geladen
• Man möchte ein neues Bild hochladen
• unmittelbar nach dem hochladen sollte sich das Bild aktualisieren zu dem neu hochgeladenen, mit dem neuen Link aus der DB.

Wie bekomm ich das zustande?

Vielen Dank schonmal für die Hilfe und Gedanken anstöße man ist ja lern fähig^^

Nico

[Gundis Gomma]

ich hätte da so ein Anliegen. Vorneweg ich habe absolut keinen blassen Schimmer von der Materie Ajax/Javascript

Für dieses Problem: Schlecht.

Ich habe ein Formular welches mit PHP die Bilder hochlädt, klein aber fein.
Dennoch sollen die Bilder neben her angezeigt werden im Reload nach ändern des Links in der Datenbank
Es sollte natürlich nicht gleich die ganze Seite neuladen, sondern wie beschrieben nur die Bilder.

Da du "keinen blassen Schimmer" von Javascript hast, würde ich kurz und bündig antworten: Lass' es.

Das Senden von HTML-Formularen (oder allgemein: Daten) im Hintergrund an den Server ist grundsätzlich kein Problem, dummerweise gibt es da aber eine Ausnahme - Dateien. Dateien waren bei dem ganzen Ajax/XMLHTTPRequest-Krams ursprünglich nicht vorgesehen, das ist gerade erst im Kommen.
Der nach wie vor nötige Umweg geht über ein <iframe>, tut zwar, was er soll, ist aber nur mittelmäßig schön und erfordert möglicherweise doch etwas weitergehende Kenntnisse.

Nun gibt es gibt fertige Lösungen wie zum Beispiel http://malsup.com/jquery/form/#file-upload; diese basiert auf JQuery, was dir auch bei der dem Upload folgenden Änderung der Bilder in der Seite behilflich sein dürfte. Sieht auf den ersten Blick recht einfach aus, aber das ist ja meist so, wenn man die Grundlagen schon kennt.
Nichtsdestotrotz, vielleicht hilft es dir ja schon weiter - und sei es nur in der Erkenntnis, dass du deine Zeit und Nerven erstmal in Dinge steckst, bei denen schneller was Funktionierendes und Nützliches rauskommt (nützlich insofern, als dass das Hintergrundhochladen der Bilder ja eher Spielerei als Notwendigkeit ist).

Ich würde dir vorschlagen, erstmal dein empfangendes Skript so umzubauen, dass es nach Empfang der Bilder gleich wieder das Formular im aktuellen Status ausgibt. Das Erscheinen der hochgeladenen Bilder sollte schon Bestätigung genug sein, dass die Bilder hochgeladen wurden, dazu brauchst du nicht noch ein

echo "Header-box erfolgreich hochgeladen";

oder dergleichen. Erstelle also ein Skript, das zwei Schritte in dieser Reihenfolge abarbeitet:

1. Falls per POST aufgerufen, Daten verarbeiten.
2. Formular mit aktuellen Daten ausgeben.

Dieses Skript lässt sich später auch sehr leicht mit einer Ajax-Lösung koppeln.

Im Moment scheinst du erst die alten Daten auszugeben und dann die gesendeten Daten zu verarbeiten (und ein "Erfolg!" hinterherzuschieben). Im Ergebnis bekommt der Nutzer so nach Absenden seiner Bilder ein Formular zu sehen, dessen Inhalt schon nicht mehr gültig ist.

noch nicht klar ob ich für jeden img tag eine neues script haben muss
oder ob man da nicht irgendwie in kombination zu php arbeiten kann.

Um irgendetwas, was die Dateien auf dem Server empfängt, wirst du nicht herumkommen, in deinem Falle naheliegenderweise PHP. Dieser Teil auf dem Server hat aber nicht unbedingt etwas mit dem Javascript-Part zu tun, den du im Formular benötigst, um die Daten abzuschicken. Du brauchst also beide, aber wie die zusammenspielen, kann man sich aussuchen.

echo("$nav_butt")
echo("$nav_butt2")

Ich habe ja nix gegen Englisch, es ist nur immer lustig, wenn Leute ohne Not Englisch schreiben ohne im Englischen sicher zu sein. Oder bist du dir tatsächlich im Klaren darüber, was du da geschrieben hast? <:)

[nico]

ich hätte da so ein Anliegen. Vorneweg ich habe absolut keinen blassen Schimmer von der Materie Ajax/Javascript

Für dieses Problem: Schlecht.

Bedeutet ergo ich muss zusehen, das ich mir das so langsam und sicher beibringe, da ich ansonsten viel verpassen könnte.

Ich habe ein Formular welches mit PHP die Bilder hochlädt, klein aber fein.
Dennoch sollen die Bilder neben her angezeigt werden im Reload nach ändern des Links in der Datenbank
Es sollte natürlich nicht gleich die ganze Seite neuladen, sondern wie beschrieben nur die Bilder.

Da du "keinen blassen Schimmer" von Javascript hast, würde ich kurz und bündig antworten: Lass' es.

Das Senden von HTML-Formularen (oder allgemein: Daten) im Hintergrund an den Server ist grundsätzlich kein Problem, dummerweise gibt es da aber eine Ausnahme - Dateien. Dateien waren bei dem ganzen Ajax/XMLHTTPRequest-Krams ursprünglich nicht vorgesehen, das ist gerade erst im Kommen.
Der nach wie vor nötige Umweg geht über ein <iframe>, tut zwar, was er soll, ist aber nur mittelmäßig schön und erfordert möglicherweise doch etwas weitergehende Kenntnisse.

Nun gibt es gibt fertige Lösungen wie zum Beispiel http://malsup.com/jquery/form/#file-upload; diese basiert auf JQuery, was dir auch bei der dem Upload folgenden Änderung der Bilder in der Seite behilflich sein dürfte. Sieht auf den ersten Blick recht einfach aus, aber das ist ja meist so, wenn man die Grundlagen schon kennt.
Nichtsdestotrotz, vielleicht hilft es dir ja schon weiter - und sei es nur in der Erkenntnis, dass du deine Zeit und Nerven erstmal in Dinge steckst, bei denen schneller was Funktionierendes und Nützliches rauskommt (nützlich insofern, als dass das Hintergrundhochladen der Bilder ja eher Spielerei als Notwendigkeit ist).

Also das Hintergrund hochladen ist mir relativ. Da eigentliche nur ein reload des img Tag erfolgen soll nachdem der PHP Script durch ist

Ich würde dir vorschlagen, erstmal dein empfangendes Skript so umzubauen, dass es nach Empfang der Bilder gleich wieder das Formular im aktuellen Status ausgibt. Das Erscheinen der hochgeladenen Bilder sollte schon Bestätigung genug sein, dass die Bilder hochgeladen wurden, dazu brauchst du nicht noch ein

echo "Header-box erfolgreich hochgeladen";

oder dergleichen. Erstelle also ein Skript, das zwei Schritte in dieser Reihenfolge abarbeitet:

1. Falls per POST aufgerufen, Daten verarbeiten.
2. Formular mit aktuellen Daten ausgeben.

Wenn Post aufgerufen wird Die IF-Anweisung ausgeführt um zu prüfen ob das Input-Field nicht leer ist. Ist das der Fall wird die Mysql Anweisung ausgeführt, Erfolgsmeldung sowie Formular erscheinen.

Dieses Skript lässt sich später auch sehr leicht mit einer Ajax-Lösung koppeln.

Im Moment scheinst du erst die alten Daten auszugeben und dann die gesendeten Daten zu verarbeiten (und ein "Erfolg!" hinterherzuschieben). Im Ergebnis bekommt der Nutzer so nach Absenden seiner Bilder ein Formular zu sehen, dessen Inhalt schon nicht mehr gültig ist.

noch nicht klar ob ich für jeden img tag eine neues script haben muss
oder ob man da nicht irgendwie in kombination zu php arbeiten kann.

Um irgendetwas, was die Dateien auf dem Server empfängt, wirst du nicht herumkommen, in deinem Falle naheliegenderweise PHP. Dieser Teil auf dem Server hat aber nicht unbedingt etwas mit dem Javascript-Part zu tun, den du im Formular benötigst, um die Daten abzuschicken. Du brauchst also beide, aber wie die zusammenspielen, kann man sich aussuchen.

echo("$nav\_butt")  
echo("$nav\_butt2")  

Ich habe ja nix gegen Englisch, es ist nur immer lustig, wenn Leute ohne Not Englisch schreiben ohne im Englischen sicher zu sein. Oder bist du dir tatsächlich im Klaren darüber, was du da geschrieben hast? <:)

Ja darüber bin ich mir im klaren, es dient für mich nur zu Orientierung kein Deutsch oder Englisch, sehe es einfach als Zeichen Kette an^^

Natürlich könnte ich auch die Bilder nach dem bestätigen des Submit Buttons per $_FILES ausgeben lassen... denke zwar schon wieder ums eck aber mal schauen

Muss ich gleich mal Testen

[Matthias Apsel]

Om nah hoo pez nyeetz, nico!

Ein paar Gedankenanstöße, die aber nichts mit deinem eigentlichen Problem zu tun haben.

* Du missbrauchst eine Tabelle zur Gestaltung
* Du verwendest veraltete Attribute, hast dich außerdem bei "width" einmal verschrieben, ein Attribut "nof" kenne ich nicht
* Du verwendest Leerzeichen, um Abstände zu erzeugen

Stecke sämtliche Gestaltung ins CSS.

* Du möchtest nicht die Tags reloaden.

Matthias