Upload Datei in JavaScript mit Beispiel
- Beispieldatei hochladen mit JavaScript in HTML
- Alternative Methode zum Hochladen/Auswählen einer Datei mit JavaScript
Dieser Artikel erklärt, wie wir eine Datei aus dem Dateiauswahldialog auswählen und die ausgewählte Datei mit der fetch-Methode auf unseren Server hochladen können. Wir müssen unsere ausgewählten Dateidaten an ein Formulardatenobjekt anhängen, um eine beliebige Datei auf unseren Back-End-Serverspeicher hochzuladen.
let formData = new FormData();
formData.append('file', fileupload.files[0]);
Beispieldatei hochladen mit JavaScript in HTML
Wir erstellen ein Eingabeformular vom Typ file, um eine Datei mit einer beliebigen Erweiterung aus unserem PC-/Systemspeicher auszuwählen. Es wird eine Schaltfläche zum Aufrufen einer Funktion uploadFile() geben, die Dateidaten an das Formulardatenobjekt anhängt und diese Formulardaten einfach mit der Abrufmethode auf unseren Server hochlädt. Die fetch-Methode wird in JavaScript für Netzwerkanfragen als API-Aufrufe zum Abrufen ODER Hochladen von Daten vom Frontend zum Backend verwendet.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | File upload example
</title>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Hi Users Choose your file and Click upload.</h2>
<!-- Input Form Elements HTML 5 -->
<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload file </button>
<!-- File Upload Logic JavaScript -->
<script>
async function uploadFile() {
//creating form data object and append file into that form data
let formData = new FormData();
formData.append("file", fileupload.files[0]);
//network request using POST method of fetch
await fetch('PASTE_YOUR_URL_HERE', {
method: "POST",
body: formData
});
alert('You have successfully upload the file!');
}
</script>
</body>
<html>
In der obigen HTML-Seitenquelle sehen Sie ein einfaches Eingabeformular vom Typ file, um die Dateidaten aus dem lokalen Systemspeicher des Benutzers abzurufen, indem Sie auf choose file klicken, und es gibt eine Schaltfläche Upload file, um unsere aufzurufen deklarierte Funktion und fahren Sie mit der Funktionalität fort.
Auf dieser Frontend-Webseite sehen Sie auch den Namen mit der Erweiterung Ihrer ausgewählten Datei.
Hier sehen Sie <script>-Tags, die notwendig sind, um javaScript-Anweisungen in doctype html zu verwenden. In diesen Tags haben wir uploadFile() deklariert.
Die Funktion enthält ein Formulardatenobjekt, und die Datei wird an dieses Formulardatenobjekt angehängt und ruft die Netzwerkanfrage mit der Methode fetch POST auf; Die Dateidaten werden im Formularkörper der Netzwerkanforderung gesendet.
Im nächsten Schritt zeigt function() dem Benutzer eine Warnbox an You have successfully upload the file! wenn die Datei erfolgreich hochgeladen wurde.
Alternative Methode zum Hochladen/Auswählen einer Datei mit JavaScript
Sie können auch das gleiche Ergebnis wie unten gezeigt erzielen. Sie können ein -Element mit type=“file” erstellen, indem Sie die Methode document.createElement() verwenden.
Wir können einfach mit type="file" auf ein <input>-Element zugreifen, indem wir die getElementById()-Methode verwenden.
var data = document.getElementById('my_file');
<button onclick="myFunction()">Choose file</button>
<script>
function myTestFunction() {
var data = document.createElement("INPUT");
data.setAttribute("type", "file");
document.body.appendChild(data);
}
</script>
In den obigen Beispielen wird var data mit einem document.createElement("INPUT"); Funktion, wo wir das Attribut der Daten mit dem Dateityp setzen müssen.
Im nächsten Schritt müssen wir appendChild mit Daten auf document.body anhängen.