Bilder und Texte in Body hochladen

  • Hallo,


    ich habe ein Modal, wo ich ein Image-Preview und einen kleinen Text-Editor reingebaut habe.

    Nun möchte ich das ganze in das Body-Teil hochladen. Sprich, das ausgewählte Bild und den Text

    Momentan habe ich auch einen Webserver aufgebaut. Brauche ich den Server um die Bilder hochzuladen?


    Ich darf nur Javascript und HTML benutzen. pasted-from-clipboard.pngAjax und JQuery sind leider ausgeschlossen.



    Ich bin etwas verwirrt wie ich das Ganze realisieren könnte.

    Habt ihr irgendwelche Tipps für mich?


    Grüße

    Büsra

  • was meinst du mit im body hochladen?

    Dein Mini Editor mit Bild und Text kannst du zuhause ja ganz normal im Browser erstellen.,

    Wenn du dann Senden klickst oder Speichern muß der Text mit Bild ja irgendwo hin.

    Wo soll das angezeigt werden ?


    Auf deiner HP ?

    Normalerweiße nimmt ein Php Script das in Empfang und speichert Text in der DB und Bild auf Server.

    Man kann auch beides auf Server speichern.


    Auf Ajax und Jquery kann man eigentlich verzichten , das Kann das Native Javascript auch alles.

    Ohne Php und Datenbanken könnte man auch mit firebase arbeiten ,aber man sollte erstmal wissen was du genau vor hast



  • Hey,

    also mit dem body meine ich, dass das bild und der text dazu in einem div-container angezeigt werden muss, welche sich im body der HP befindet.

    Wäre denn auch eine Lösung ohne PHP und DB möglich?

    Momentan kann ich nämlich das Bild, welches ich auswähle im Server speichern und das Bild als preview anzeigen lassen. Das Speichern in den div-container funktioniert noch nicht.



    (Das Bild und der Text sollen in die grüner Fläche gespeichert werden)

    pasted-from-clipboard.png


    P.S: Sorry für die späte Antwort.

  • Zitat

    Momentan kann ich nämlich das Bild, welches ich auswähle im Server speichern und das Bild als preview anzeigen lassen.

    Wenn Du das Bild als Preview anzeigst, hast Du ja sicher eine Quelle und zeigst es in einem img-Tag an. Mit derselben Quelle und einem weiteren img-Tag kannst Du es dann auch in dem div-Container anzeigen. Etwa so:

    Code
    1. document.getElementById('id-des-div').innerHTML = '<img src="' + deineBildquelle + '">';

    Wenn Du damit nicht zum Ziel kommst, dann poste deinen Code oder besser die URL der Seite, wenn Du sie online hast.

  • Wenn Du das Bild als Preview anzeigst, hast Du ja sicher eine Quelle und zeigst es in einem img-Tag an. Mit derselben Quelle und einem weiteren img-Tag kannst Du es dann auch in dem div-Container anzeigen. Etwa so:

    Code
    1. document.getElementById('id-des-div').innerHTML = '<img src="' + deineBildquelle + '">';

    Wenn Du damit nicht zum Ziel kommst, dann poste deinen Code oder besser die URL der Seite, wenn Du sie online hast.

    hier ist mein modal, in der ich die preview image lade


    und die script funktion der preview image




    müsste ich dann dein code, wie unten in den script tag einfügen wenn ja, wohin genau?

    Code
    1. document.getElementById('page-content').innerHTML = '<img src="' + output + '">';
  • Dann dürfte es sehr einfach sein:

    Ungetestet, aber eigentlich kann da nicht viel schief gehen.

  • PS: Da habe ich u. U. etwas zu kurz gedacht: Du hast ja ein Formular mit einem Submit und willst das Bild auch nach dem Abschicken des Formulars anzeigen. In dem Fall musst Du auf das Bild zurück greifen, das dann auf dem Server gespeichert wurde. Aber u. U. bist Du noch gar nicht so weit, denn Du schreibst:

    Zitat

    Momentan habe ich auch einen Webserver aufgebaut. Brauche ich den Server um die Bilder hochzuladen?

    Ja, Du brauchst den Webserver und ein PHP-Skript um das hochgeladene Bild auf dem Server zu speichern.

  • PS: Da habe ich u. U. etwas zu kurz gedacht: Du hast ja ein Formular mit einem Submit und willst das Bild auch nach dem Abschicken des Formulars anzeigen. In dem Fall musst Du auf das Bild zurück greifen, das dann auf dem Server gespeichert wurde. Aber u. U. bist Du noch gar nicht so weit, denn Du schreibst:

    Ja, Du brauchst den Webserver und ein PHP-Skript um das hochgeladene Bild auf dem Server zu speichern.

    Die Bilder werden im Server gespeichert, nachdem ich auf Submit klicke. Das ganze habe ich mit multer realisiert. Nach dem Klicken soll es auch auf der Webpage angezeigt werden bzw. im div (page-content).

    PHP habe ich noch gar nicht eingebunden. Ich war mir hier nicht sicher, ob ich es auch ohne PHP realisieren könnte.

  • Hier. ich zeige dir die server.js


  • Zitat

    Das ganze habe ich mit multer realisiert.

    Da muss ich jetzt passen, weil ich keine Kenntnisse habe, was node.js und multer betrifft. In jedem Fall brauchst Du die URL des Bildes, um es in dem Container anzeigen zu können. Da diese wahrscheinlich dynamisch ist, d. h. sich von Bild zu Bild ändert, muss es einen Weg geben, sie vom Server-Skript zurück zu bekommen.

    Sicher findet sich jemand, der dich bei multer unterstützen kann.

  • Da muss ich jetzt passen, weil ich keine Kenntnisse habe, was node.js und multer betrifft. In jedem Fall brauchst Du die URL des Bildes, um es in dem Container anzeigen zu können. Da diese wahrscheinlich dynamisch ist, d. h. sich von Bild zu Bild ändert, muss es einen Weg geben, sie vom Server-Skript zurück zu bekommen.

    Sicher findet sich jemand, der dich bei multer unterstützen kann.

    Vielen Dank für die Mühe. Ich hoffe es findet sich jemand :)

  • Danke. So ungefähr sieht mein code auch aus. nur das ich im post sowas hier habe. Alles andere sieht mit dem beispiel gleich aus.


    hier lade ich die bilder auf den server. nun möchte ich es gleichzeitig hier im page(siehe id) geladen haben. Irgendwie komme ich hier nicht weiter und mache mir echt sorgen, ob ich es je hinbekommen werde.


    Code
    1. <div class="wrapper">
    2. <section class="page-content" id="page">
    3. <h2>HElloHEllo</h2>
    4. </section>
    5. </div>
  • Das problem ist das ich mich mit den Node kram nicht auskenne, bzw multer.

    Man kann sich einiges zusammen reimen , doch ob es richtig ist kann ich nicht sagen.

    Dein Upload funktioniert soweit?

    Hast du einen Upload Ordner wo die Bilder gespeichert sind ?

    Diese Url ( bzw Pfad ) würde man mit PHP jetzt in deinen Ordner einbinden.

    Das mußt du jetzt nur mit dein Node multer machen , richtig ??

  • ja genau, der upload in den ordner funktioniert soweit.

    Zu deiner letzten Frage: Genau. Aber wenn es gar keine Lösung dafür gibt, würde ich mir auch eine php lösung dazu ansehen.... Ich verstehe nicht, warum es tausende beispiele gibt, die bilder mit multer im serverordner hochzuladen aber es keine dafür gibt, diese wieder aus dem ordner auszulesen.

  • Kuck mal hier

    https://stackoverflow.com/ques…age-upload-path-in-nodejs


    Da ist ein ( html ) Code der die Bilder uploadet und ein ( html ) code der die anscheinend anzeigen soll.

    Html in Klammern weil kein plan wie man das sonst nennen soll.


    Wenn dir das nicht weiter hilft könntest du mal im php Forum fragen.

    Da sind einige die mit verschiedene Server Sprachen arbeiten.

    Hier im Forum wüßte ich jetzt keinen der mit node.js arbeitet.