✔ thumbnails dynamisch bei PHP auslesung erstellen

brizzi · 16. Juni 2014

Also hier ist schon mal den Programmiercode

Javascript:

<script type="text/javascript">
    
      window.URL = window.URL || window.webkitURL;
$(document).ready(function() {
    $(".kommibild").on('change', function fileThumbnail2(files)
{
        var $this = $(this),


     id = $this.find('input[id^=name_thumb]').attr('value');
     var thumb = document.getElementById(id);
    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 das ist das PHPcode zum jeweiligen java

PHP:

<form action="post_komm_eigene_seite.php" method="post" enctype="multipart/form-data" id="kommibild" name="kommibild" class="kommibild">
                                    <input type="text" id="postkom" name="id" style="visibility: hidden" value="'.$id.'">
                                  
                                  
                                    <input id="photofile" type="file" name="file" accept="image/*"  multiple >
                                  
                                    <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" name="name_thumb'.$x.'" id="name_thumb'.$x.'" value="thumbnail2'.$x.'">
     <div id="thumbnail2'.$x.'" style="border-radius: 4px; -webkit-margin-start: 6px; width: 450px;">
   
      </div>
  
    </div>
                                    <textarea id="areae" name="nachricht"
                                    onkeydown="setTimeout("addZeile(document.getElementById(\"area\"))",10)"
                                    style="font-size:12px;  height: 42px; width: 450px; font-family:Verdana, Geneva, sans-serif;"
                                    cols="68" rows="3" placeholder="Schreib etwas..."></textarea>   
                                  
                                  
                                    <br>
                                    <br>
                                    <br>
                                     <br>
                                  
                                    </form>

ja es soll eigentlich wie sone art AJAX klappen. bin mir selber etwas unsicher. auf jedenfall mit diesem code bzw. mit der selben hintergrund idee wie ajax. es soll direkt ohne großes neuladen passieren.

Hoffe du kannst mir helfen und checkst meinen Fehler.

ach mir fällt gerade ein, dass wenn ich es ohne create image mir einen text bzw. die ID anzeigen lasse, zeigt er mir im richtigen POST an und mit der richtigen bzw. zugehörigen ID

Quaese · 17. Juni 2014

Hi,

viel hilft mir dein Code auch nicht weiter ... nirgendwo ersichtlich, wo die einzelnen Beiträge zu sehen sind, die PHP-Variablen nicht aufgelöst ...

Naja, ich versuche es ein letztes Mal mit einem "Schuss ins Blaue".

Javascript:

window.URL = window.URL || window.webkitURL;

$(document).ready(function() {
    var fileThumbnail2 = function (evt) {
        var $form = $(this),
            id = $form.find('input[id^=name_thumb]').val(),
            files = evt.target.files,
            thumb = document.getElementById(id),
            x;

        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";

    };

    $(".kommibild").on('change', fileThumbnail2);
});

function FileAbbrechen() {

    var x = document.getElementById("thumbx");

    //style
    x.style.opacity = "0";
    x.style.visibility = "visible";


    if (fileThumbnail2() == 1) {
        return false;
    }
}

Ciao
Quaese

brizzi · 17. Juni 2014

ach sry, habe nur den teil gepostet wo man einen kommentar posten kann. Hab garnicht mehr dran gedacht, dass ausgelesene zu posten. Naja ich versuche es mal mit dem was du mir geschickt hast. Danke nochmal.

brizzi · 17. Juni 2014

Ganz ehrlich Quaese ne, du bist einfach der Hammer. Echt ich bin echt sprachlos. Es hat einfach mal funktioniert. Dafür das du es so gesehen blind geschrieben hast. Echt super vielen vielen Dank an dich.

Du bist echt ein genie

mfg
brizzi

brizzi · 17. Juni 2014

HI, eig. hatte sich ja meine Frage bzw. mein Fehler behoben. Nun Stellt sich jedoch eine weitere frage bei mir auf.
Auf einer anderen Seite, die komplett auf AJAX basiert und funktioniert, wollte ich auch gerne die Thumbnail rein setzen nur spuckt mir firebug immer wieder wenn ich mit dem untersuchung operator und über den blob gehe, Die URL kann nicht angeben werden. und zeigt in HTML nichts an.

sry das ich weiterhin mit diesen thumbnail fragen nerve. Nur ist für mich wichtig und möchte auch dazu lernen.

Quaese · 18. Juni 2014

Hi,

wenn es ein Ajax-Request ist, muss die Verarbeitung und Anzeige des Thumbs im onreadystatechange-Event (evtl. auch success, done) erfolgen. Die Logik, die ID bzw. das Element weiterzureichen, um das Bild anzeigen zu können, sollte ähnlich eventuell sogar gleich sein.

Ciao
Quaese

brizzi · 18. Juni 2014

Ah ok weiß ich bescheid und probiere es mal aus, danke

brizzi · 21. Juni 2014

Hallo an allen, ich hab da immernoch ein kleines problem mit dem thumbnails. Jedoch diesmal mit dem verschicken. Wenn ich den oben verbesserten Script nehme, zeigt der mir keine Vorschau an und nun habe ich noch ein script gefunden und modifiziert. Nur leider besteht nun das problem mit dem verschicken der Bilder.

Das alles ist für ein Nachrichtensystem. Dort soll im Textfeld eine vorschaubild erstellt werden, wenn man ein Bild verschicken möchte.
Das Nachrichtensystem basiert komplett auf AJAX.

Das ist das javascript für die Vorschau

Javascript:

<script>
document.getElementById('post_it').addEventListener ('click',doStartUpload,true);
var msg = document.getElementById('msg');


function doStartUpload (e) {
    progress.value = 0;
    msg.innerHTML = '';
    document.querySelector ('#dlist').innerHTML = '';
    var fileElem = document.getElementById('photopost');
    if (fileElem.files.length == 0) {
        msg.innerHTML = 'Wählen Sie zuerst eine Datei aus';
    } else {
        msg.innerHTML = 'Datei für Übertragung vorbereiten … ';
        var reader = new FileReader();
        reader.onloadend = doUpload;
        var output = [];
        console.log('doUpload aufgerufen')
        reader.readAsArrayBuffer(fileElem.files[0]);
        console.log ('fileElem.files[0] ' + fileElem.files[0]);
        for (var i = 0, f; f = fileElem.files [i]; i++ ) {
            document.querySelector ('#dlist').innerHTML += f.size + ' ' + f.lastModifiedDate.toLocaleDateString() + ' ' + f.type + '<br />';
        }
    }
    e.preventDefault();
}



function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    for (var i = 0, f; f = files[i]; i++) {
    console.log ('Bilder mal ansehen')
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            return function(e) {
                var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/ height="100px" width="100px">'].join('');
document.getElementById('flist').insertBefore(span, null);
            };
        })(f);
        reader.readAsDataURL(f);
    }
    document.querySelector ('#flist').innerHTML = '';
}
document.getElementById('photopost').addEventListener('change', handleFileSelect, false);

// Javascript Clientseitig
function doUpload(e) {
    msg.innerHTML = 'Datei-Upload beginnt';
    console.log ('message Area geschrieben')
    //Ajax-Objekt
    var xhr = new XMLHttpRequest();
    console.log ('neuer XMLHttpRequest ')
    xhr.upload.onprogress = function (e) {
        console.log ('Starte Upload');
        var percentUpload = Math.floor(100*e.loaded / e.total);
        progress.value = percentUpload;
        msg.innerHTML = percentUpload + '% geladen';
    }
    xhr.onprogress = function (e) {
        var percentDownload = Math.floor(100 * e.loaded / e.total);
        progress.value = percentDownload;
        msg.innerHTML = percentDownload + '% herunter geladen';
    }
    xhr.onerror = function(e) {
        msg.innerHTML = "Ein Fehler ist aufgetreten";
    }
   
  if($("#nachrichten").val() == ""){
            $("#incontent").html("Bitte schreibe eine Nachricht");
        }else{
            var nachrichten = $('#nachrichten').attr("value");
            var hash = $('#hasher').attr("value");
             var fd = new FormData;
                fd.append("file", fileElem);

    xhr.open("POST", "die_msg.php?nachricht="+nachrichten +"&hash="+hash+"&file=" +fd,true);
      xhr.send(e.target.result);
    xhr.send(fd);
  }
}

</script>

und das ist der Form Tag dazu

HTML:

<input type="text" value="<? echo $_GET['hash'];?>" id="hasher" name="hash" style="visibility:hidden" >
<div id="lese">
</div>

    <br/>
<!--   <script type="text/javascript" src="jquery-1.11.0.js"></script> -->

<div id="alles_antwort" style="position:relative; height:auto;">
    <form name="forml" method="post" id="fom12" enctype="multipart/form-data" style="width:520px; position:relative;" class="kommibild" action="javascript:doUpload();">

      <input id="photopost" type="file" name="file[]" accept="image/*" titel="wähle ein Bild aus" multiple >
      <input type="button" id="photonewpost" name="photopost" title="Foto hochladen" onMouseOver="hoverFunction();" onMouseOut="">
      <br>
      <input type="submit" id="post_it" style="position: absolute;" value="Posten">
      <div class="blogimage" style=" visibility:visible; width: 350px; height: auto; margin-left: 70px;  margin-bottom: 52px; border-radius: 4px; position:relative;">
        <input type="button" id="thumbx1" onClick="FileAbbrechen1();">
        </button>
       
        <!--<input type="hidden" class="name_thumb" name="name_thumb" id="name_thumb" value="thumbnail">-->
<div>
<progress id="progress" value="0" max="100"></progress>
<span id="msg"></span>
<div id="dlist"></div>
<div id="flist"></div>
</div>
        <!-- <a class="fancybox fancybox.ajax" href="ajax_blogtitelbild.txt">Blog Titelbild</a> -->
       
      </div>
   
  
   <textarea name="nachricht"  id="nachrichten" rows="6" cols="50" style="resize:none; margin-top:0px; position:relative;" placeholder="Schreibe eine Nachricht" ></textarea>
    <br/><div id="post_btn" style="margin-top: 0px; position: relative;">
     
      </div>
    </form>
  
</div>

ich weiß auch nicht, der gibt mir keine Fehlermeldung an. Das was er mir anzeigt sind die einzelnen consolen informationen die angegeben sind. wie weit der script gekommen ist.

Ich hoffe ihr könnt mir da auch helfen, weil ich weiss da echt nicht mehr weiter. sitze jetzt seit 3 tagen daran und komme mir vor wie son doof. weil nichts in die Datenbank eingetragen wird.

mfg brizzi

PS.: ich hoffe das ist jetzt kein problem, dass ich diesen beitrag mit hier drunter schreibe, weil es schließlich ziemlich identisch ist, also vom gedanken her.

Quaese · 23. Juni 2014

Hi,

mit dem folgenden Konstrukt werden die Dateien an den Server übertragen.

Javascript:

$(function(){
    document.getElementById('post_it').addEventListener('click', doStartUpload, true);
    msg = document.getElementById('msg');

    document.getElementById('photopost').addEventListener('change', handleFileSelect, false);
});

function doStartUpload(e) {
    progress.value = 0;
    msg.innerHTML = '';
    document.querySelector('#dlist').innerHTML = '';

    var fileElem = document.getElementById('photopost');

    if (fileElem.files.length == 0) {
        msg.innerHTML = 'Wählen Sie zuerst eine Datei aus';
    } else {
        msg.innerHTML = 'Datei für Übertragung vorbereiten … ';

        var reader = new FileReader(),
            output = [];

        reader.onloadend = doUpload;

        reader.readAsArrayBuffer(fileElem.files[0]);

        for (var i = 0, f; f = fileElem.files[i]; i++) {
            document.querySelector('#dlist').innerHTML += f.size + ' ' + f.lastModifiedDate.toLocaleDateString() + ' ' + f.type + '<br />';
        }
    }

    e.preventDefault();
}

// Javascript Clientseitig
function doUpload(e) {
    msg.innerHTML = 'Datei-Upload beginnt';

    //Ajax-Objekt
    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function(e) {
        var percentUpload = Math.floor(100 * e.loaded / e.total);

        progress.value = percentUpload;
        msg.innerHTML = percentUpload + '% geladen';
    }

    xhr.onprogress = function(e) {
        var percentDownload = Math.floor(100 * e.loaded / e.total);

        progress.value = percentDownload;
        msg.innerHTML = percentDownload + '% herunter geladen';
    }

    xhr.onerror = function(e) {
        msg.innerHTML = "Ein Fehler ist aufgetreten";
    }

    if ($("#nachrichten").val() == "") {
        $("#incontent").html("Bitte schreibe eine Nachricht");
    } else {
        var nachrichten = $('#nachrichten').attr("value"),
            hash = $('#hasher').attr("value"),
            files = document.getElementById('photopost').files,
            data = new FormData();

        // Files in FormData-Objekt aufnehmen
        for (var _key in files) {
            if (files.hasOwnProperty(_key)) {
                data.append(_key, files[_key]);
            }
        }

        // Ajax-Request
        xhr.open("POST", "my_upload_file.php", true);
        xhr.onreadystatechange = function() {
            if ((xhr.readyState == 4) && (xhr.status == 200)) {
                console.log("onreadystatechange", xhr);
            }
        };
        xhr.send(data);
    }
}

Die Funktion zum Anzeigen der Vorschaubilder habe ich entfernt, da diese zum Lösen des eigentlichen Problems nicht erforderlich ist.

Die Verarbeitung auf der Serverseite musst du selbstverständlich noch implementieren.

Ciao
Quaese

brizzi · 23. Juni 2014

Super danke nochmals für deine Hilfe Quaese.

Das heißt eigetlich kann ich den vorschau script einfach nur dazu einfügen noch und es würde ja somit auch noch funktionieren, wenn ich es jetzt richtig verstanden habe.

nochmals vielen dank für deine große Unterstüzung.

mfg.
Brizzi

✔ thumbnails dynamisch bei PHP auslesung erstellen

brizzi

Erfahrenes Mitglied

Quaese

Moderator

brizzi

Erfahrenes Mitglied

brizzi

Erfahrenes Mitglied

brizzi

Erfahrenes Mitglied

Quaese

Moderator

brizzi

Erfahrenes Mitglied

brizzi

Erfahrenes Mitglied

Quaese

Moderator

brizzi

Erfahrenes Mitglied

Neue Beiträge