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. html-seminar.de/woltlab/attachment/2412/Ajax 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

Zitat von basti1012

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

Alles anzeigen

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)

html-seminar.de/woltlab/attachment/2428/

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

Zitat von Sempervivum

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

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

<div class="modal-bg">
            <div class="modal">
                    <form action="/upload" method="POST" enctype="multipart/form-data">
                        <input type="file" accept="image/*" onchange="loadFile(event)" name="myImage"><br>
                        <img id="output"/>

                    <span class="modal-close">+</span>
                        <div id="editor-container">
                        </div>
                        <input type="submit" value="Upload Photo" id="i"/>
                        
                    </form>
                </div>
            </div>
        </div>

        <!-- Hier sollen die Bilder auf der webpage angezeigt werden -->
        <div class="wrapper">
            <section class="page-content">
                <h2>HElloHEllo</h2>
            </section>
        </div>

und die script funktion der preview image

<script>
         var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
      output.style.height = "100px";
      output.style.width = "auto";
    };
    reader.readAsDataURL(event.target.files[0]);
  };
      
    </script>

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

document.getElementById('page-content').innerHTML = '<img src="' + output + '">';

Zitat von Sempervivum

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

server.post('/upload', (req, res) =>{
    upload(req, res, (err) =>{
        if(err){
            res.render('home', {
                msg:err
        });
    }else{
        if(req.file == undefined){
            res.render('home', {
           msg: 'Error: No File Selected'
        });
        } else {
        res.render('home' , {
            msg: 'File Uploaded!',
        file: `upload/`  
    });
    }
    }
});
});

Zitat von Sempervivum

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

Zitat von basti1012

kuck mal ob du damit weiter kommst.

https://code.tutsplus.com/tuto…multer-in-node--cms-32088

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.

server.post('/upload', (req, res) =>{
    upload(req, res, (err) =>{
        if(err){
            res.render('home', {
                msg:err
        });
    }else{
        if(req.file == undefined){
            res.render('home', {
           msg: 'Error: No File Selected'
        });
        } else {
        res.render('home' , {
            msg: 'File Uploaded!',
        file: `upload/` 
    });
    }
    }
});
});

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.

<div class="wrapper">
            <section class="page-content" id="page">
                <h2>HElloHEllo</h2>
            </section>
        </div>

Zitat von basti1012

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 ??

Alles anzeigen

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.

Zitat von basti1012

Kannst du die Bilder sehen wenn du die url des uploads Bilds in Browser eingibst ?

Nein, nur localhost:3000/upload