Bild mit JavaScript hochladen
Ein Benutzer kann ein Bild ausgehend von einer HTML-Datei hochladen, indem er ein Eingabefeld des Dateityps im Textabschnitt erstellt. In diesem Artikel zeigen wir Beispiele für das Hochladen eines Bildes mit JavaScript.
JavaScript-Bild hochladen
Ein div-Tag wird mit einer ID von display_image verwendet, um das Bild anzuzeigen, das als Ausgabe mit definierter Breite und Höhe hochgeladen wird.
Syntax:
<input type ="file" id ="image_input" accept ="image/jpeg, image/png, image/jpg">
<div id="display_image"></div>
Um sicherzustellen, dass das hochgeladene Bild perfekt hineinpasst, sollten die Bildeigenschaften zu einer CSS-Datei mit den richtigen Werten hinzugefügt werden. Hier ist die Umrandung keine wesentliche Eigenschaft, die hinzugefügt werden sollte, aber sie lässt den Benutzer leicht sehen, wo das Bild erscheint.
#display-image{
width: 500px;
height: 325px;
border: 2px solid black;
background-position: center;
background-size: cover;
}
Als nächstes sollte eine JavaScript-Datei erstellt werden, um Zugriff auf das Eingabefeld zu erhalten und einen "change"-Ereignis-Listener anzuhängen, bei dem es sich um ein Ereignis handelt, das ausgeführt wird, wenn der Benutzer den Wert eines Elements geändert hat. Unter diesem Listener sollte ein Benutzer Zugriff auf das FileReader-Objekt erhalten, mit dem die Webanwendungen den Inhalt von Dateien oder Rohdatenpuffern lesen können, die auf dem lokalen Computer des Benutzers gespeichert sind, und einen "load"-Ereignis-Listener anhängen, wenn dies auftritt Die gesamte Seite wird vollständig geladen, einschließlich aller abhängigen Quellen wie Bilder, CSS-Dateien und JavaScript-Dateien.
Kurz gesagt, das hochgeladene Bild wird in ein darstellbares Format übersetzt. Das hochgeladene Bild wird in der Variable uploadImage gespeichert, und diese Variable wird verwendet, um die Eigenschaft backgroundImage in CSS zu initialisieren.
const image_input = document.querySelector('#image_input');
image_input.addEventListener('change', function() {
const file_reader = new FileReader();
file_reader.addEventListener('load', () => {
const uploaded_image = file_reader.result;
document.querySelector('#display_image').style.backgroundImage =
`url(${uploaded_image})`;
});
file_reader.readAsDataURL(this.files[0]);
});
Vollständiger Quellcode:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Upload Image </title>
<style>
#display_image{
width: 500px;
height: 325px;
border: 2px solid black;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<input type="file" id="image_input" accept="image/jpeg, image/png, image/jpg">
<div id="display_image"></div>
<script>
const image_input = document.querySelector("#image_input");
image_input.addEventListener("change", function() {
const file_reader = new FileReader();
file_reader.addEventListener("load", () => {
const uploaded_image = file_reader.result;
document.querySelector("#display_image").style.backgroundImage = `url(${uploaded_image})`;
});
file_reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
Ausgang:
JavaScript Bild ohne definierte Breite oder Höhe hochladen
Wir können auch ein Bild ohne definierte Breite oder Höhe in Originalgröße in JavaScript hochladen. Folgen Sie den unteren Schritten.
-
Erstellen Sie zunächst eine HTML-Datei und legen Sie den Eingabetyp file fest, indem Sie die ID als Datei mit der onchange-Funktion
filevalidation()zuweisen, die das hochgeladene Bild aufruft. -
Als nächstes verwenden Sie die Dokumentenmethode
.getElementById()innerhalb der Funktionfilevaildation(), um das Element anhand seiner IDs übervar image = document.getElementById(‘hochgeladenes Bild’);auszuwählen. -
Fügen Sie dem Programm eine statische Methode
URL.createObjectURL()hinzu, um die URL anuploaded_image.srczu übergeben, die das vom Benutzer hochgeladene Bild alsuploaded_image.src=URL.createObjectURL(event.target.files[0]);. -
Um zu überprüfen, ob eine Datei vom Benutzer ausgewählt wurde, eine Schleife als
if(s selected_file.files.length>0)und um die Größe der ausgewählten Datei zu erhaltenconst file_size=s selected_file.files.item(i).size;kann verwendet werden. -
Als nächstes wird die Dateigröße in Bytes umgerechnet. Bei Verwendung von
Math.round((file_size/1024));Funktion kann es in jede beliebige Einheit umgerechnet werden.
Vollständiger Quellcode:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Upload Image</title>
</head>
<body>
<input type="file" id="file" onchange="FileValidation(event)" >
<br><br><br>
<h2>Uploaded Image by the User</h2>
<img id="uploaded image">
</body>
<script>
FileValidation = (event) => {
var uploaded_image = document.getElementById('uploaded image');
uploaded_image.src = URL.createObjectURL(event.target.files[0]);
const selected_file = document.getElementById("file");
if (selected_file.files.length > 0) {
for (const i = 0; i <= selected_file.files.length - 1; i++) {
const file_size = selected_file.files.item(i).size;
const file = Math.round((file_size / 1024));
}
}
}
</script>
</html>
Ausgang:
Aus dem obigen Code kann jeder Dateityp vom Benutzer ausgewählt und hochgeladen, aber nicht angezeigt werden. Mit weiteren Implementierungen können mehrere Bild-Uploads durchgeführt werden, indem den oben genannten Programmen je nach Anforderung mehr Codierung hinzugefügt wird.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.