JavaScript <img src=""> Tags erzeugen und füllen

Chakky · Jun 19, 2011

Hallo HaBo,

ich bin zurzeit dran ein kleinen Multiuploader zu Programmieren und dann passenden BBCode auszugeben.

Hab es jetzt soweit geschafft, das es wirklich ein Multiuploader ist und der BBCOde in eine Textarea ausgegebn wird. Jetzt wollte ich gerne noch mit Javascript eine kleine Gallery der hochgeladen Bilder anzeigen lassen.

Habe mir gedacht ich kann "einfach" ein

Code:

<img src="pfad">

tag erstellen und dort mein Pfad reinhauen.

Nur mir fehlt jeglicher ansatz in die Richtung.

Mein bissheriger code

PHP:

<?php $host = "http://localhost/imagescript";?>
<html>
    <head>
        <link href="uploadify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#file_upload').uploadify({
    'uploader'  : 'uploadify.swf',
    'script'    : 'uploadIfy.php',
    'cancelImg' : 'cancel.png',
    'folder'    : '/uploads/',
    'auto'      : false,
    'removeComplete' : false,
    'multi'     : true,
   'onComplete': function(event, queueID, fileObj, response, data){
            var form = document.forms['ImageAddForm'];
            document.getElementById("ta").value +="[URL=<?php echo $host;?>/uploads/";
            
             document.getElementById("ta").value +=fileObj.name;
             document.getElementById("ta").value +="][IMG]<?php echo $host;?>/uploads/thumb/";
             document.getElementById("ta").value +=fileObj.name;
              document.getElementById("ta").value +="[/IMG][/URL]"
	     document.getElementById("ta").value +="\n";
        
		  
		  }
  });
});
</script>
    </head>
    <body>
        <form name="form1" action="upload.php" method="POST">
<input id="file_upload" name="file_upload" type="file" />

        </form>
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload Files</a>

<form name="ImageAddForm" action="upload.php" method="POST">
 
    <textarea id="ta"></textarea>
</form>

    </body>

</head>

es spielt vor allem folgende Zeilen die rolle:

Code:

'onComplete': function(event, queueID, fileObj, response, data){
            var form = document.forms['ImageAddForm'];
            document.getElementById("ta").value +="[URL=<?php echo $host;?>/uploads/";
            
             document.getElementById("ta").value +=fileObj.name;
             document.getElementById("ta").value +="][IMG]<?php echo $host;?>/uploads/thumb/";
             document.getElementById("ta").value +=fileObj.name;
              document.getElementById("ta").value +="[/IMG][/URL]"
	     document.getElementById("ta").value +="\n";

Damit füll ich mein Textarea mit meinen BBCode. Nun wollte ich in diesem bereich auch die Gallery erzeugen lassen nur wie? Kann mir jemand einen ansatz geben? Ich hab diverse Codesnippest versucht u.a. den:

Code:

var img=document.createElement("IMG");
		img.scr="home.gif";

aber irgendwie geht das nicht.

mein zweiterversuch war:

Code:

 document.writeln('<img src="/uploads/fileObj.name">');

aber das zerhaut mir nur meine ganze seite und versucht dann ein fehlerhaftes bild zu laden :/

Da ich von Javascript garkein Plan habe, könnte mir da jemand einen Ansatz zeigen? Danke

Brabax · Jun 19, 2011

Ich hab mir mit Inputs mal so geholfen:

Code:

<script type="text/javascript">
<!--
      var AnzahlZellen = 1;
      ZellenBelegung = new Array(20);

      var tmpCounter = 0;
      while(tmpCounter < 20)
             {
                    ZellenBelegung[tmpCounter] = 0;
                    tmpCounter += 1;
             }

       function neueZelle()
              {
                    if(AnzahlZellen <= 20)
                          {
                                 var Zelle = 0;
                                 tmpCounter = 0;

                                 while(tmpCounter < 20)
                                        {
                                                 if(ZellenBelegung[tmpCounter] == 0)
                                                        {
                                                               ZellenBelegung[tmpCounter] = 1;
                                                               Zelle = tmpCounter;
                                                               break;
                                                        }
                                                  tmpCounter += 1;
                                        }

                                document.getElementById('bilderform').innerHTML =        document.getElementById('bilderform').innerHTML + "<span id=\"new_pic_" + Zelle + "\"><input type=\"file\" name=\"pic[]\"> <span onClick=\"removeCell(" + Zelle + ")\">Bild entfernen</span><br></span>";
                                 AnzahlZellen += 1;
                       }
             }
-->
</script>
...
<script type="text/javascript">
<!--
      function removeCell(cell_index)
            {                                                           document.getElementById("bilderform").removeChild(document.getElementById("new_pic_" + cell_index))
                  AnzahlZellen -= 1;
                  ZellenBelegung[cell_index] = 0;
            }
-->
</script>

<span id="bilderform" style="cursor: pointer;"  ></span>

she3p · Jun 20, 2011

jQuery, wunderbar!

Ungetestet:

Code:

$('<img />').attr('src', imagesource);

Dieses Objekt kannst du dann per .append() oder ähnlichen Methoden in den DOMTree hängen.

Ehrm ich seh gerade, du mischt hier natives JavaScript mit jQuery.. Schreiben wir das etwas um und verschönern das ein wenig:
Ungetestet:

Code:

'onComplete': function(event, queueID, fileObj, response, data)
{
    var form    = $('form[name="ImageAddForm"]');
    var ta        = $('#ta');
    
    // added a spacer to avoid bbcode matching on habo
    var ta_cont    =    "[URL =<?php echo $host;?>/uploads/" +
                        fileObj.name +
                        ][IMG]<?php echo $host;?>/uploads/thumb/" +
                        "[/IMG][/URL]" +
                        "\n";
                    
    ta.attr('value', ta_cont);
}

Ich behaupte mal, die jQuery-Dokumentation könnte dir gut weiterhelfen!

Nur so zur Info:

Code:
Code:

var img=document.createElement("IMG"); img.scr="home.gif";

Das Attribut heisst src nicht scr! Wie hast du damit das Element in den DOMTree gehängt?

Code:
Code:

document.writeln('<img src="/uploads/fileObj.name">');

Tja damit schreibst du am Anfang des Dokumentes exakt diesen String hin. Wenn du willst, dass fileObj.name richtig ersetzt wird, musst du wie auch schon oben den String konkatinieren.

Code:

'<img src="' + fileObj.name + '" />';

Chakky · Jun 20, 2011

danke euch erstmal, morgen mit ausprobieren

ja das ist alles etwas naja sagen wir mal chaotisch da ich von JS garkeinen Plan habe und ich mir eigtl viel zusammenkopiert habe und nur rumprobiert habe

//edit

so hab das gerade mal ausprobiert, das mit den append() klappt super, muss ich mir unbedingt merken. Ein weitere positiver nebeneffekt, ich glaub ich werd mir mal JQuery und Ajax mal genauer anschauen das hat jetzt mein interesse geweckt

JavaScript <img src=""> Tags erzeugen und füllen

Chakky

Member of Honour

Brabax

0

she3p

0

Chakky

Member of Honour