Heim > Web-Frontend > js-Tutorial > Wie kann ich die Dateigröße vor dem Hochladen mit JavaScript überprüfen?

Wie kann ich die Dateigröße vor dem Hochladen mit JavaScript überprüfen?

Mary-Kate Olsen
Freigeben: 2024-12-15 20:56:16
Original
735 Leute haben es durchsucht

How Can I Verify File Size Before Uploading with JavaScript?

Überprüfen der Dateigröße vor dem Hochladen mit JavaScript

Beim Hochladen von Dateien ist es wichtig sicherzustellen, dass die Dateigröße bestimmte Einschränkungen erfüllt. JavaScript bietet hierfür mit der Datei-API eine elegante Lösung.

Lösung:

Um die Dateigröße vor dem Hochladen zu überprüfen, verwenden Sie den folgenden Code:

// Setup event listener for 'Load' button click
document.getElementById("btnLoad").addEventListener("click", function () {
  // Verify browser support for FileReader
  if (!window.FileReader) {
    console.log("File API not supported.");
    return;
  }

  // Retrieve the file from the file input
  var input = document.getElementById("fileinput");
  var file = input.files[0];

  // Validate file size
  if (!file) {
    console.log("No file selected.");
  } else {
    console.log("File " + file.name + " is " + file.size + " bytes in size.");
  }
});
Nach dem Login kopieren

Erklärung:

  • Dieser Code verwendet die FileReader-API zum Lesen der Datei und bestimmen Sie ihre Größe in Bytes.
  • Die Validierung erfolgt im Ereignis-Listener, der an die Schaltfläche „Laden“ angehängt ist.
  • Wenn eine Datei erfolgreich abgerufen wurde und die Größenbeschränkungen erfüllt, wird der Dateiname angezeigt und Größe werden in der Konsole angezeigt.
  • Wenn keine Datei ausgewählt ist oder der Browser die Datei-API nicht unterstützt, werden entsprechende Meldungen angezeigt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Dateigröße vor dem Hochladen mit JavaScript überprüfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage