Heim >Web-Frontend >js-Tutorial >Dateitypvalidierung beim Hochladen mit JavaScript

Dateitypvalidierung beim Hochladen mit JavaScript

PHPznach vorne: 2023-09-20 17:25:031482Durchsuche

使用 JavaScript 上传时进行文件类型验证

Social-Media-Plattformen, die sich ausschließlich auf Beschäftigung konzentrieren, ermöglichen Benutzern die Erstellung von Konten und werden aufgefordert, die erforderlichen Dokumente hochzuladen, damit diese von Personalvermittlern analysiert werden können. Um Dateien von Benutzern zu sammeln, bieten diese Websites in ihrem Benutzerdatenformular die Option „Datei hochladen“ oder „Datei auswählen“. Sie akzeptieren nur bestimmte Dateitypen wie „.pdf“, „.jpg“, „.png“. " "Warten. Dieser Vorgang wird als Dateiüberprüfung bezeichnet und kann mithilfe von JavaScript durchgeführt werden.

In diesem Artikel entwerfen wir eine Option zur Validierung von Dateitypen mithilfe von JavaScript. Gehen Sie dazu wie folgt vor -

Schritt 1 – Erstellen Sie eine Funktion namens „validateFileType()“.
Schritt 2 – Lösen Sie die Funktion „validateFileType()“ aus, wenn sich der Wert des Dateieingabefelds ändert.
Schritt 3 – Rufen Sie die ausgewählte Datei aus dem Dateieingabefeld mit document.getElementById('fileInput').files[0] ab.
Schritt 4 – Definieren Sie ein Array namens „allowedTypes“, das die zulässigen Dateitypen enthält (z. B. „image/jpeg“, „image/png“, „application/pdf“).
Schritt 5 – Verwenden Sie die Methode Includes(), um zu überprüfen, ob der Typ der ausgewählten Datei im Array „allowedTypes“ enthalten ist.

Wenn im Array „allowedTypes“ der Dateiname auf dem Bildschirm angezeigt wird.

Wenn der Dateityp nicht gefunden wird, führen Sie die folgenden Schritte aus.
Schritt 6 – Zeigen Sie dem Benutzer eine Warnmeldung an, die besagt: „Ungültiger Dateityp. Bitte wählen Sie eine JPEG-, PNG- oder PDF-Datei aus.“
Schritt 7
– Löschen Sie den Namen des Dateieingabefelds, indem Sie document.getElementById('fileInput').value auf eine leere Zeichenfolge setzen.

Im folgenden Beispiel versuchen wir, den Dateityp beim Hochladen mit der oben genannten Methode zu validieren -

<!DOCTYPE html>
<html>
<head>
   <title>File Type Validation Example</title>
   <script>
      function validateFileType() {
         var selectedFile = document.getElementById('fileInput').files[0];
         var allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];

         if (!allowedTypes.includes(selectedFile.type)) {
            alert('Invalid file type. Please upload a JPEG, PNG, or PDF file.');
            document.getElementById('fileInput').value = '';
         }
      }
   </script>
</head>
<body>
   <h1>File Type Validation Example</h1>
   <input type="file" id="fileInput" onchange="validateFileType()">
</body>
</html>

Versuchen Sie nach dem Ausführen des oben genannten Verfahrens, die Datei hochzuladen. Wenn die Datei „.jpg“, „.png“ oder „.pdf“ ist, wird der Dateiname auf dem Bildschirm angezeigt. Andernfalls wird eine Warnung mit der Meldung „Ungültiger Dateityp“ angezeigt.

Das obige ist der detaillierte Inhalt vonDateitypvalidierung beim Hochladen mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 字符串

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Symboldatentyp in JavascriptNächster Artikel：Symboldatentyp in Javascript

In Verbindung stehende Artikel

Mehr sehen