Dateiuploadfeld mit bilder vorschau dynamisch

brizzi

Erfahrenes Mitglied
Hallo lieber Community,

ich habe ein Problem unf hoffe ihr könnt mir dabei helfen.

Mein problem liegt darin, dass ich die ganzezeit versuche einen Formular zu erstellen bzw. eine Seite erstelle, wo man sein Text, seine Bilder direkt sich so anaschauen kann, wie es dann als fertiger beitrag stehen würde. Sprich Headline, Bild, Text und einen Slider mit bis zu 10 Bilder.

Das Formular würde ja soweit stehen, nun habe ich jedoch das problem mit dem letzten Teil. Das heißt, bei dem Formular habe ich einen Inputfeld für ein Bild, sobald man dort ein Bild ausgewählt hat, taucht automatisch per JS ein weiterer Inputfeld für bilder auf. und das geht immer so weiter. ( Den Script dafür habe ich schon soweit parat.) Jetzt komm ich zu dem wo ich nicht weiterkomme. Von jedem Inputfeld brauche ich sogesehen den Thumbnail. Der dann im Slider eingebuden wird. mehrere Scripte für den Thumbnail habe ich auch, nur weiss ich nicht wie ich es kombiniere.

Also das ist das Formular
Code:
  <form method="post" name="Formularan" action="blog_speichern.php" enctype="multipart/form-data" onsubmit="return chkenFormular()">
     <input id="iconbloggen" type="file" name="file" accept="image/*" titel="wähle ein Bild aus" multiple onChange="fileThumbnail(this.files);" style="opacity:0; position:absolute; cursor:pointer;" >
     <button id="iconbloggen" > <h6>Bild Posten</h6> </button>
     <button id="iconbloggen3"> <h6>Video Posten</h6> </button>
     <select style="margin-top:0px; margin-left:4px; position:absolute;" name="thema" id="iconbloggen2" aria-label="Thema" class="thema" ><option value="-1" >Thema</option>
    <option value="fashion">Fashion</option>
    <option value="beauty">Beauty</option>
    <option value="events">Events</option>
    </select>
         <div class="blogit">
        <textarea id="headline" name="headline" placeholder="Deine Headline"></textarea>
         <div id="thumbnail" style="border-radius: 4px;  -webkit-margin-start: 5px; margin-top:10px; border-radius:4px; width: 635px;"> </div>
            <textarea id="deintext" name="deintext" placeholder="Schreibe was dich bewegt"></textarea>
        </div>
           
      <ol id="files">
            <li style="float:left; width:59px;">
            <input type="file" name="files[]" style="width:60px; height:60px; position:absolute; margin-left:-60px; opacity:0;" />
            <button style="height:60px; width:60px; float:left; margin-left:0px;">+</button>
             </li>
        </ol>
         
      <input type="submit"  id="posten" value="Posten" style="-webkit-margin-before:-4px;">
     </form>


Das wäre das JS-Script für die Dateiuploadfelder
Java:
    function handleFileInputs() // Sammlung
    {
       
        this.run = function() // Funktion zum Starten
        {
            handleInputs(); // Aufruf der Funktion zum Überwachen der Felder
        }
       
        function handleInputs()
        {
            files = document.getElementById('files'); // Liste per ID holen
            inputs = files.getElementsByTagName('input'); // Alle Inputs in dieser Liste holen
            for(n = 0;n < inputs.length;n++) // Alle Felder durchgehen
            {
                input = inputs[n]; // Aktuelles Feld in Variable speichern für einfachere Schreibweise
                /*
                    Achtung!
                    Ich prüfe hier nicht ob das Feld ein Upload-Feld ist.
                    Das kann optional noch eingefügt werden, ich halte es allerdings für unnötig.
                */
                input.onchange = function() // Beim ändern des Feldes
                {
                    existsFile = checkFilename(this.value);
                        // Prüfen ob ausgewählter Pfad / Datei schon in einem anderen Feld ausgewählt ist
                    if(trim(this.value) != '' && !existsFile && !existsEmptyInputs())
                        // trim etfernt alle Leerzeichen am Anfang und am Ende eines Strings
                        // Wertüberprüfung der oben aufgerufenen Funktion ob Datei schon ausgewählt wurde
                        // Aufruf der Funktion für das Prüfen ob bereits leere Felder vorhanden sind
                       
       
                    {
                        li = document.createElement('li'); // Neues Listelement erstellen
                        li.style.float="left";   
                        li.style.overflow="hidden";
                        li.style.width="60px";
                        li.style.marginLeft="10px";               
                        input = document.createElement('input'); // Input-Feld erstellen
                        input.setAttribute('type', 'file'); // type des Feldes auf file setzen
                        input.setAttribute('name', 'files[]'); // name des Feldes auf files[] setzen
                        input.style.width="60px";
                        input.style.height="60px";
                        input.style.position="absolute";
                        input.style.opacity="0";
                        button= document.createElement('button');
                        button.style.width="60px";
                        button.style.height="60px";
                        button.style.marginLeft="2px";
                        button.style.position="absolute";
                        button.style.float="left";
                        button.style.display="inline";
                        li.appendChild(button);
                        li.appendChild(input); // In das Listelement das input einfügen, hinter den Textknoten
                        files.appendChild(li); // Der Liste das Listelement einfügen, am Ende der Liste
                        handleInputs(); // Aufruf dieser Funktion für das Überprüfen der Felder
                    }
                    else if(existsFile) // Sollte Datei schon ausgewählt sein
                    {
                        alert("Fehler!\n- Datei bereits ausgewählt"); // Fehler ausgeben, dass Datei bereits ausgewählt ist
                        this.value = ''; // Inhalt des Feldes leeren
                    }
                }
            }
        }

        function checkFilename(FILENAME)
        {
            var i = 0;
           
            inputs = document.getElementById('files').getElementsByTagName('input');
            for(n = 0;n < inputs.length;n++)
            {
                input = inputs[n];
                if(input.value == FILENAME && trim(input.value) != '')     // Prüfen ob der Inhalt des momentanen Feldes gleich dem Übergebenen ist
                {                            // Prüfen ob der Inhalt des momentanen Feldes nicht leer ist
                    if(++i == 2) // Sollte i = 2 sein, dann true zurückgeben
                        return true;
                    /*
                        Warum 2?
                        Einmal darf dieser Pfad vorhanden sein, sonst darf man diese Datei überhaupt nicht auswählen wenn man auf 1 prüfen würde
                    */
                }
            }
           
            return false;
        }
       
        function existsEmptyInputs() {
           
            inputs = document.getElementById('files').getElementsByTagName('input');
            for(n = 0;n < inputs.length;n++)
            {
                input = inputs[n];
                if(trim(input.value) == '') // Prüfen ob der Inhalt des aktuellen Feldes leer ist, wenn ja true zurückgeben
                    return true;
            }
           
            return false;
        }
       
        function trim(STRING)
        {
            if(STRING != null)
                return STRING.replace(/^\s+/, '').replace(/\s+$/, ''); // Entferne alle Leerzeichen am Anfang und am Ende des übergeben Strings
            else
                return '';
        }
    }
   
    window.onload = function() // Bei Aufruf der Seite
    {
        inputs = new handleFileInputs(); // Initialisieren der Sammlung
        inputs.run(); // Starten der Überwachung für die Felder
    }

und das Thumnail-Script wäre dann das

Code:
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.className = "bilddesposts";
            img.src = window.URL.createObjectURL(input);
            img.style.position=" relative";

            img.width = 460;
        img.style.marginBottom="5px";
       
   
        img.style.borderRadius="4px";
            img.onload = function(e) {
                window.URL.revokeObjectURL(this.src);
           
            };
            var dele = document.createElement("button");
            dele.className = "loesches";
            dele.innerHTML = "x";
            dele.style.color="#333";
            dele.style.position="absolute";
            dele.style.width="40px";
            dele.style.height="40px";
            dele.style.backgroundColor="#333";
            dele.style.borderRadius="0% 0% 0%  50%";
            dele.style.lineHeight="0px";
            dele.style.outline ="none";
           
           
            thumb.appendChild(dele);
            thumb.appendChild(img);
       
           
                /* dele.click(function(){
            img.remove();
}*/
        }
            $(dele).click(function() {
                $(thumb).empty();
            });
}
    $("#files").on('change', fileThumbnail2);
});

Ich weiß das es relative viel ist, hoffe ihr könnt mir da ein tipp geben wie ich es zusammenfüge und das es nicht schon ein ähnlichen beitrag gibt.

und Danke schonmal im vorraus für eure Hilfe.

mfg Brizzi
 
Hi,

normalerweise gelte ich ja als eher als ruhig und geduldig. Als ich deinen Beitrag gerade gelesen habe, musste ich mich allerdings gehörig zusammenreißen. Immerhin hast du hier bereits wegen eines Bilduploads mit Vorschau gefragt, willst dich jetzt aber nicht mehr erinnern, ob es nicht bereits einen ähnlichen Post gibt. Sowas ärgert mich gehörig, zumal ich dir dort bereits gebetsmühlenartig vorgeben habe, wie du vorgehen musst. Jetzt stehen wieder ein paar Codefragmente wahlweise zusammengewürfelt da und du bittest einen weiteren Schnippsel für dich zum Laufen zu bringen ... hier vermisse ich so langsam die Eigeninitiative.

Wir leisten hier alle gerne Hilfe. Wenn allerdings der Verdacht aufkommt, ausgenutzt zu werden, hat der Spaß das berühmte Loch.

Ich selbst leiste hier auch gerne Hilfe und investiere meine Freizeit. Ich bin auch gerne bereit, tausende Zeilen Chaoscode zu analysieren und gebetsmühlenartig Lösungen vorzubeten. Wenn ich allerdings merke, dass der Hilfesuchende nichts lernt, sondern lediglich immer weiter fragt und sich offensichtlich die Arbeit erledigen lassen will, werde ich sauer ...

So, dass musste ich jetzt los werden.

Ciao
Quaese
 
Hey Quaese,

ja ok, dass geht zwar in diese richtung nur indesem Zusammenspiel, finde ich nichts. und ausserdem habe ich den fehler gefunden.

Der Code ansich war auch super und ich verstehe den ja auch. Seit dem du mir den gegeben hast, habe ich den in verschiedenen variationen eingesetzt und umgebaut. So ist es ja nicht und ich kann auch deine Empfindung teilen. Ich möchte hier keinen ausnutzen und ich bin gerade auch kein gelernter Programmierer. Eher ein gestalter. Daher auch meine Ausbildung zum Gestalterischen Assistenten. Ich arbeite mich langsam rein.
Desweiteren. wenn ich nicht weiß wie ihr es meint, frage ich ob ihr mir ein bespiel oder ähnliches zeigen könnt, weil ich mich nicht vollkommen in dieser Materie auskenne.

Ich sitze nach jedem eurerer Post mindestens eine Stunde drann um es zu verstehen, damit ich weiß wie ich es einsätze und für später einbinden kann.

Ja wie gesagt ich habe den fehler entdeckt, und es lag einfach nur daran dass ich es Lokal ganzezeit ausprobiert. Sobald es auf dem Server lag ging es. Ka warum aber naja.


Ich bedanke mich jedes mal über eure Hilfe und versuche immer mit zu denken und es i-wie umzusetzen und somit eigen Iniative zu zeigen.

mfg
brizzi
 
ganz ehrlich sei sauer auf mich oder nicht. nur ich bin selber momentan so gestresst. weil ich mit einem freund eine Porjekt auf die beine am stellen bin wovon meine existenz abhängt. habe alles was ich habe darein gesetzt und schuldige meine dauernden fragen. Nur wenn ich nicht weiter weiß und mehrere Tage es ausprobiere und zu keinem erfolg komme, komme ich mir so vor wie so ein Idiot und stehe dann voll auf dem schlauch und weiss dann selber nicht mehr wie etwas funktioniert. Daher bitte ich dich etwas geduld mit mir zu haben. Es heißt nicht nur weil ich frage ob du mir einen beispiel geben kannst, dass ich nichts tue. Ich informiere mich weiter und gucke ob ich doch noch ne lösung finde mit deinen tipps, oder wie ich diese anwende. Also ich bin gerade nicht der typ der dann auf seiner faulen Haut sitzt und sich sagt, ja die machen das schon für mich. Nene, ich hasse sowas auch.

Deshalb. Wie gesagt, ich bin mittlerweile was versierter in der den Programmiersprachen PHP und Javascript. Nur ich komme schnell an meine grenzen, da ich noch nicht sehr viel kann. Daher auch meine vielen fragen.

Naja ich hoffe du verstehst auch meine sicht und joa.

Ach ja ich habe es jetzt mir ganz einfach gemacht, habe einfach die thumbnails mir super einfach ausgeben lassen, und ausserdem habe ich das mit den maximalen 10 inputfelder so gemacht, dass diese schon von anfang an da sind und ich die dann einfach per Javascript nach einander auftauchen lasse. Einfach und unkompliziert.

Die einzige frage die ich mir stelle ist, das ich ja jetzt somit mehrere Inputfelder habe, wie kann ich bestimmen wo genau welches bild hingehen soll in der Tabelle?

Ich habe mich jetzt soweit schlau gemacht dass ich weiß, dass wenn ich
Code:
$[FILES][0]
einfüge, ich das erste Bild der ganzen Inputfelder anspreche. Somit könnte ich doch sagen das dieses Bild dort eingetragen werden soll und der rest dann wo anderes oder irre ich mich?

Ich weiß das es ab jetzt zu PHP gehört, nur hoffe ihr/du weißt auch darüber bescheid und könnt mir da helfen :/

mfg
Brizzi
 
Ja wie gesagt ich habe den fehler entdeckt, und es lag einfach nur daran dass ich es Lokal ganzezeit ausprobiert. Sobald es auf dem Server lag ging es.
Beim file-Protokoll (das ist jenes, wenn du einfach eine HTML-Datei mittels des Browsers öffnest) gibt es je nach Browser einige Restriktionen. Aber sowas kann mit geschickt mit einem lokalen Server lösen.

Vergib deinen Input-Feldern folgendes name-Attribut:
HTML:
<input type="file" name="myFiles[]">
Dann per PHP:
PHP:
// Folgendes ist nun ein Array, welches alle übermittelten Input-Felder beinhaltet
$_FILES['myFiles']

PS: Es wäre super, wenn du deine Code-Tags auch für die jeweiligen Sprachen konfigurierst, siehe http://www.tutorials.de/help/bb-codes#codetag

PPS: Bezüglich deines letzten Beitrags möchte ich dich bitte, ein wenig mehr auf Groß- und Kleinschreibung zu achten. Es ist anstrengend, durchgehend kleingeschriebene Textpassagen zu lesen :)
 
Vergib deinen Input-Feldern folgendes name-Attribut:
Code (HTML5):
<input type="file" name="myFiles[]">

Das habe ich auch schon soweit auch schon gemacht, nur bei dem PHP code muss ich dann um nur das erste bild auszuwählen jedoch
PHP:
$_FILES['myfiles']['die entsprechende nummer geben oder?']

oder wie mache ich das? Weil ich möchte das erste Bild welches übertragen wird in der spalte "titelbild" speichern und die restlichen Bilder in der Spalte "rest_bilder".

Kann ich das mit einem bestimmten Code fragment so leiten oder gibt es da für spezielle Codes? oder geht es garnicht in einem Formular?


PS: Es wäre super, wenn du deine Code-Tags auch für die jeweiligen Sprachen konfigurierst, siehe http://www.tutorials.de/help/bb-codes#codetag

Ich füge eigentlich die Codes immer über das Menü ein und gebe dem entsprechend auch an um was für ein Code es sich handelt. Aber achte ab jetzt mehr drauf :D

Danke nochmals
 
So machst du das:
PHP:
$_FILES['myFiles'][0]
Du musst aber aufpassen! Das ist das erste im HTML vorkommonde nichtleere <input>-Feld. Wenn der Nutzer das erste Feld bspw. nicht setzt, aber das zweite, dann wird mit obigem Code die Datei vom zweiten Inputfeld angesprochen.

Ich füge eigentlich die Codes immer über das Menü ein [...]
Das Menü beinhaltet nicht alle verfügbaren Programmiersprachen. In jedem Fall kannst du die Sprache nachträglich ändern oder hinzufügen.
 
ja super, dann ist es ja sowie ich mir es vorgstellt habe. Super vielen dank nochmal :D

zu den sprachen. Ja ist mir aufgefallen, naja werde ich ab jetzt immer nachtragen :D

mfg
brizzi
 
Hey Leute,

hab da doch noch ein kleines problem.

Mein Createelement ersetzt mir immer wieder die erstelleten Elemente in einem Div.

Heißt, ich habe 10 funktionen, wo ich sage erstelle einen <li> in der dann ein Img drinne ist und ein button. Dies Soll dann den Name Bild1 haben.

Nur es passiert folgendes. Es wird einfach ein <li> eingesetzt und das was erstellt wurde somit ersetzt. und das immmer und immer wieder.

habt dir einen Tipp für mich?
 
Hey, habs doch ncoh hinbekommen, hatte anscheinend i-ein kleinen fehler. habe es nämlich neu geschrieben heute morgen, bin ausgeschlafenem Kopf und es hat geklappt. :D
 
Zurück