HTML BILD HOCHLADEN UND ANZEIGEN LASSEN?
Hi.
Ich möchte eine Seite mit HTML erstellen, welche einen UPLOAD Button enthält, der das hochgeladene Bild unendlich oft (oder 1000 mal) untereinander anzeigt.
Mein Code im Moment ist dieser.
Mein momentanes Problem: Ich hab keine Ahnung wie ich das Bild unten anzeigen lasse :/.
Danke im Vorraus
<html>
<head>
<title>INFINITIZER</title>
<meta></meta>
</head>
<body>
<div id="header">
<hr color="red"/>
<center>
<h1><font color="red" face="Impact">INFINITIZER</font></h1>
<hr color="red"/>
</center>
</div>
<div id="upload">
<center>
<form method="post" enctype="multipart/form-data">
<label>CHOOSE A PICTURE
<input name="datei" type="file" size="50" accept="video/*,image/*">
</label>
<button>SEND</button>
</form>
</center>
</div>
<div id="pic">
<img src="datei" alt="No picture">
</div>
</body>
</html>
6 Antworten
Zuerst einmal solltest du deine Lernquelle wechseln. Dein HTML ist an mehreren Stellen fehlerhaft. So fehlt bspw. der Doctype und du verwendest eine Reihe von Tags, die bereits als deprecated/obsolete gekennzeichnet wurden (font, center).
Nutze MDN.
Deinen Code habe ich hier verbessert: https://jsfiddle.net/8h75jz39/
Um dein Bildanzeige-Problem zu lösen, benötigst du eine Programmiersprache, bspw. JavaScript, C#, Java, Dart, Python, Ruby oder PHP.
Tutorials für einen Bild-Upload gibt es viele:
Doch die jeweilige Sprache (mit Framework) solltest du bereits beherrschen.
Für die Anzeige des Bildes musst du nun nur noch das Verzeichnis (wo es gespeichert wurde) einlesen (schau in der Referenz je gewählter Sprache nach Funktionen/Klassen, mit denen sich ein Verzeichnis einlesen lässt) und dann bspw. via Schleife ausgeben lassen.
Zuletzt habe ich hier noch ein Beispiel einer Vorschauansicht adaptiert, das Ergebnis kannst du hier sehen. In diesem wird ein ausgewähltes Bild zehnmal nacheinander angezeigt. Dies ist allerdings nur ein temporärer Zustand, da das Element nur im Browser angehängt wird und so nur für den Nutzer sichtbar ist, der das Bild zuvor ausgewählt hat.
willst du das bild auf dem server speichern, brauchst du eine serverseitige sprache ,
ansonsten geht das auch mit JavaScript , einlesen und anzeigen , quasi vorschau .
mach ich mit meinen gamedateien auch , werden gleich angezeigt bevor was geuploadet wird .
Als lokale HTML-Seite könntest du einfach mit z.B. JavaScript den Dateinamen zwischenspeichern und als src in den img-Tag einfügen.
Wenn du das serverseitig machen willst, kommst du um ein geeignetes Backend zum Speichern der Datei nicht herum (Java, php, Python, Node, ...).
Du kannst vielleicht das Design machen mit HTML aber du kannst mit reinem HTML keine Befehle wie das Hochladen einer Datei durchführen.
Du kannst das Bild nicht anzeigen lassen weil es nicht hochgeladen wird.
Und weil der src im img tag fehlt
Meines Wissensstands nach wird das mit reinem HTML nicht gehen.
Da wirst du mindestens noch PHP benötigen