Leider finde ich den Button in deinem HTML nicht und mir ist auch nicht klar, wozu die beiden Outputs dienen - offenbar wird darin das selbe Bild angezeigt. Kannst Du das vielleicht erklären?
Ich habe den HTML_teil mal editiert. jetzt müsstest du die ID für den Button sehen.
Die beiden outputs sind genau das gleiche bild. output ist das bild im Modal in einer kleineren version.
output2 ist das gleiche bild, welches ins div hinzugefügt werden soll. Das versuche ich mit innerHTML zu lösen.
Hallo Zusammen,
ich versuche in einem div, dynamisch Bilder anzuzeigen. Nur leider ist es so, dass die Bilder kurz erscheinen und dann wieder verschwinden.
Ich habe auch den css-Code überarbeitet und den div aug height:auto, width: auto gestellt. Leider will es trotzdem nicht funktionieren. Habe ich vielleicht im javascript code, irgendwelche fehler?
<form method="" action="">
<input type="file" accept="image/*" onchange="loadFile(event)" onchange="onFileSelected(event)" name="file"><br>
<img id="output"/>
<input type="submit" value="Upload Photo" id="i"/><div class="wrapper">
<div class= "my" id="myImage">
<h2>Your image here</h2>
</div>
</div>JS
var loadFile = function(event) {
var reader = new FileReader();
var output2 = document.getElementById('myImage');
reader.onload = function(){
var output = document.getElementById('output');
output.src = reader.result;
output.style.height = "100px";
output.style.width = "auto";
document.getElementById('i').onclick = () => { //id = i, ist ein Button zum Hochladen
myFunction();
}
function myFunction(){
output2.innerHTML += '<img src="' + reader.result + '">';
};
};
reader.readAsDataURL(event.target.files[0]);
};css
#myImage{
height: auto;
width: auto;
display: flex;
overflow: auto;
}würde mich auf vorschläge freuen
Kannst du die Bilder sehen wenn du die url des uploads Bilds in Browser eingibst ?
Nein, nur localhost:3000/upload
Alles anzeigenDas 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 ob du damit weiter kommst.
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>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 
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/`
});
}
}
});
});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.
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:
Codedocument.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 + '">';Alles anzeigenwas 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)
html-seminar.de/woltlab/attachment/2428/
P.S: Sorry für die späte Antwort.
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