[HaBo]

Chakky · 19.06.11, 21:10

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-Code:

  <?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 +="[IMG]<?php echo $host;?>/uploads/thumb/";
             document.getElementById("ta").value +=fileObj.name;
              document.getElementById("ta").value +="[/IMG]"
	     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 · 19.06.11, 22:16

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>

Anzeige

- Anzeige -

she3p · 20.06.11, 08:16

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:

Zitat:

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?

Zitat:

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 · 20.06.11, 20:46

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

Anzeige

- Anzeige -

19.06.11, 21:10	#1 (permalink)
Chakky Senior Member Registriert seit: 28.10.03 Likes: 110	<img src=""> Tags erzeugen und füllen Anzeige 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-Code: <?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 +="[IMG]<?php echo $host;?>/uploads/thumb/"; document.getElementById("ta").value +=fileObj.name; document.getElementById("ta").value +="[/IMG]" 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 __________________ cu Chakky we are dreaming in digital we are living in realtime we are thinking in binary we are talking in IP welcome to our world Geändert von Chakky (23.06.11 um 08:32 Uhr)

20.06.11, 20:46	#4 (permalink)
Chakky Senior Member Themenstarter Registriert seit: 28.10.03 Likes: 110	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 __________________ cu Chakky we are dreaming in digital we are living in realtime we are thinking in binary we are talking in IP welcome to our world Geändert von Chakky (23.06.11 um 08:32 Uhr)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

[HaBo]

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