thumbnails dynamisch bei PHP auslesung erstellen

brizzi

Erfahrenes Mitglied
Hallo liebe Community,

ich sitze nun seit mehreren Tagen an einem Problem.

Das Problem liegt bei den thumbnails. Ich lasse per onclick von einem Fileupload einen Thumbnail erstellen welches ja an sich ja ohne weiteres ja klappt. Nur liegt das Problem darin, dass wenn ich bei meinem ausgelesenen gästebuch einen Thumbnail erstellen lasse es immer in dem ersten Post erstellt wird. Jedoch soll es nach meinen Bedürfnissen so sein, dass wenn ich im dritten Post mit einem Bild kommentiere soll der Thumbnail auch im dritten Post erstellt werden und nicht im ersten immer. Ich habe es mit PHP hochzählen lassen den id namen und im Java dann auch durch
Javascript:
$this.find('div[id^='thumbnail2]')
ausprobiert ohne erfollg. Dann habe ich die durch

Javascript:
thumb= getElementbyId('thumbnail2'){ for (i=0; thumb<i; i++)....

ausprobiert ebenfalls ohne erfolg.

Ich glaube die erste variante wäre die sinnvolle nur weiß ich nicht ob die falsch geschrieben ist oder nicht. Ich bin echt ratlos :/.

hier ist auch noch mein Script mal, damit ihr euch noch einen eindruck machen könnt und mir sagen könnt was daran faslch ist oder einen anderen Lösungvorschlag habt.
das ist das Javascript
Javascript:
<script type="text/javascript">
     
      window.URL = window.URL || window.webkitURL;
function fileThumbnail2(files)
{
    var thumb = this.find('div[id^=thumbanil2]');
    thumb.innerHTML = "";
    if(!files)
        return;
    for(var i = 0; i < files.length; i++)
    {
        var file = files[i];
        if(!file.type.match(/image.*/))
            continue;
        var img = document.createElement("img");
        img.src = window.URL.createObjectURL(file);
        img.width = 450;
        img.onload = function(e) {
            window.URL.revokeObjectURL(this.src);
        };
        thumb.appendChild(img);
    }
   
    x = document.getElementById("thumbx");
       
        //style
        x.style.opacity ="1";
        x.style.visibility="visible";
       
}

function FileAbbrechen(){
   
    x = document.getElementById("thumbx");
       
        //style
        x.style.opacity ="0";

        x.style.visibility="visible";
       
 
  if(fileThumbnail2() == 1) {
  return false;
  }
 
}
      </script>

Und hier der PHP script...ach ja das ist eig. im einem echo verpackt.
PHP:
</div><br>
 <form action="post_komm_eigene_seite.php" method="post" enctype="multipart/form-data">
     <input type="text" id="postkom" name="id" style="visibility: hidden" value="'.$id.'">
     <input id="photofile" type="file" name="file" accept="image/*" >
      <input type="button" id="post_bild" name="photokomm" title="Foto hochladen">
       <input type="submit" id="postkomm" value="">
                                   
                                   
    <div class="blogimage2" style="width: 450px; height: auto; margin-left: 8px; margin-top: -42px; margin-bottom: 50px; border-radius: 4px;        -webkit-margin-start: 0px;">
   
    <input type="button" id="thumbx" onClick="FileAbbrechen();">
    <input type="hidden" class="name_thumb" value="thumbnail2"'.$x.'"">
     <div id="thumbnail2"'.$x.'"" style="border-radius: 4px; -webkit-margin-start: 6px; width: 450px;">
    
      </div>
   
    </div>

mfg
Brizzi und danke an alle schon mal im Vorraus
 
Du hast das Problem im falschen Forenbereich vorgestellt, denn die angewandte Scriptsprache JavaScript hat mit der Programmiersprache Java nichts gemeinsam.

Ich hab das Moderatoren-Team gebeten, das Thema entsprechend zu verschieben.
Ich lasse per onclick von einem Fileupload einen Thumbnail erstellen welches ja an sich ja ohne weiteres ja klappt. Nur liegt das Problem darin, dass wenn ich bei meinem ausgelesenen gästebuch einen Thumbnail erstellen lasse es immer in dem ersten Post erstellt wird. Jedoch soll es nach meinen Bedürfnissen so sein, dass wenn ich im dritten Post mit einem Bild kommentiere soll der Thumbnail auch im dritten Post erstellt werden und nicht im ersten immer.
Mit diesem Script-Fehlverhalten drängt sich der Verdacht auf, dass deine benannten/gezeigten ID-Bezeichner im vollständigen HTML-Code des ausgelesenen Gästebuchs mehrfach enthalten sind.

Sie müssen aber eindeutig sein, dürfen darin jeweils nur einmalig vergeben werden.
Dann habe ich die durch

Javascript:
thumb= getElementbyId('thumbnail2'){ for (i=0; thumb<i; i++)....

ausprobiert ebenfalls ohne erfolg.
Die Methode lautet getElementById().

Die for-Schleife kann hier aber aus genanntem Grund zu keinem Erfolg führen.
Javascript:
    var thumb = this.find('div[id^=thumbanil2]');
Hier ist dir ein Buchstabendreher unterlaufen.
 
Zuletzt bearbeitet:
Also habe den rechtschreib fehler korregiert und leider immer noch kein erfolg, nun zeigt er mir gar keine vorschau mehr an. Jemand eine Idee oder einen anderen Lösungsweg??

Vielen dank nochmals im vorraus
 
Hi,

getElementById gibt immer ein einzelnes Objekt zurück - vorausgesetzt, es existiert eins.

Wann wird denn die Funktion fileThumbnail2 aufgerufen? Vielleicht kannst du das aufrufende Element oder die ID mitgeben. Zumindest muss eine Möglichkeit gefunden werden, die ein eindeutiges Ermitteln des gewünschten "thumbs"-Objektes zulässt.

Ciao
Quaese
 
Die Funktion fileThumbnail2 wird sobald man einen Bild mit dem inputfeld ausgewählt wurde aufgerufen.

Ja die Idee hatte ich auch, nur weiß leider gerade nicht wie. Kannst du mir einen kleinen stups in die richtung geben. weil ich stehe da wirklich auf dem schlauch :/

danke schonmal
 
Hi,

was passiert denn beim Upload der Datei? Wird eine Ajax-Routine verwendet?

Das auslösende Formular sollte ja bekannt sein. Dieses enthält ein verstecktes Element mit name="name_thumb". Dieses enthält als value die ID des Thumbcontainers. Damit sollte auch die ID zu ermitteln sein.

z.B.:

Voraussetzung: auf form steht das auslösende Uploadformular:
Javascript:
var id = form.elements['name_thumb'].value;

Damit könntest du nach dem Upload die Funktion fileThumbnail2 aufrufen:
Javascript:
fileThumbnail2(id, files);

Innerhalb von fileThumbnail2 kannst du dann eindeutig über getElementById das benötigte Element ermitteln:
Javascript:
var thumb = document.getElementById(id)

Ciao
Quaese
 
Hallo Quaese,

dass ding ist ich möchte den thumnail bevor die Datei hochgeladen wurde erstellen, sogesehen als Vorschau bild. Weißt du was ich meine. Wie bei FB da zeigt der dir auch eine Vorschau des bildes an, bevor du es Hochlädst.
 
So habe es jetzt so gemacht wie du es meintest Quaese.

Wenn ich im innerHTML was reinschreibe z.b. var id zeigt er mir es richtig an, jedoch sobald das create img ins spiel kommt, scheißt der vollkommen druaf und setzt es immer in dem ersten. hier ist ein screenshot von dem was passiert. Hoffe du hast da eventuell ne idee oder i-jemand. Weil ich bin echt am verzweifeln.thumbnail_post1.PNG

Wenn ihr nochmal das Script haben möchtet bzw. sehen wollt kann ich es nochmal hochladen
 
Hi,

ohne Programmcode ist es in der Tat schwer zu analysieren, woran es liegen könnte. Wenn du den Code nochmal postest, wäre es hilfreich, das in einer Form zu tun, die alles relevante beinhaltet und ohne viel eigene Manipulation lauffähig ist.

Wie willst du das Thum erstellen? Ajax? File-Api? Sonstiges?

Ciao
Quaese
 

Neue Beiträge

Zurück