Image Upload auf WebPage

busgi

Aktives Mitglied
Hallo Leute,

ich baue gerade eine Webseite auf und bin bei einer Sache hängengeblieben.
Ich habe ein Modal aufgebaut, bei der ich Bilder auf meine eigentliche Webseite hochladen möchte. Das Auswählen des Bildes und die Preview sind mir ganz gut gelungen (Im Modal). Momentan kann ich die Bilder auch auf meinem Server speichern. Nun würde ich gerne dieses Bild auf die Webseite einbinden. Stellt euch vor es wäre wie ein Blogeintrag.

Ich zeige euch mal was ich bisher gemacht habe.
Code:
<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>
                    <br>
                    <img src="<%= typeof file != 'undefined'?
                            file: ''%>" class="responsive-img">
                </div>
            </div>
        </div>

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

<!-- Node.js - Datei -->
Javascript:
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/` 
    });
    }
    }
});
});


Habt ihr irgendwelche Tipps? Ich habe Lösungen mit JQuery und PHP gesehen, nur leider ist das bei diesem Projekt nicht möglich.
 
Zuletzt bearbeitet von einem Moderator:
Ähnliche Java Themen
  Titel Forum Antworten Datum
A Datei-Upload -> ausgewählte Datei wieder löschen HTML / CSS 1

Ähnliche Java Themen

Neue Themen


Oben