Maison > Article > interface Web > Validation du type de fichier lors du téléchargement à l'aide de JavaScript

Validation du type de fichier lors du téléchargement à l'aide de JavaScript

PHPzavant: 2023-09-20 17:25:031441parcourir

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

Les plateformes de médias sociaux axées uniquement sur l'emploi permettent aux utilisateurs de créer des comptes et seront invités à télécharger les documents nécessaires afin qu'ils puissent être analysés par les recruteurs. Afin de collecter les fichiers des utilisateurs, ces sites Web proposeront une option « Télécharger un fichier » ou « Sélectionner un fichier » dans leur formulaire de détails utilisateur ; ils n'acceptent que des types de fichiers spécifiques tels que « .pdf », « .jpg », « .png ». " "attendez. Ce processus est appelé vérification de fichier et peut être effectué à l'aide de JavaScript.

Dans cet article, nous allons concevoir une option pour valider les types de fichiers à l'aide de JavaScript. Pour ce faire, voici comment -

Étape 1 - Créez une fonction appelée validateFileType().
Étape 2 - Déclenchez la fonction validateFileType() lorsque la valeur du champ de saisie du fichier change.
Étape 3 - Récupérez le fichier sélectionné dans le champ de saisie du fichier à l'aide de document.getElementById('fileInput').files[0].
Étape 4 - Définissez un tableau appelé AllowTypes qui contient les types de fichiers autorisés (par exemple "image/jpeg", "image/png", "application/pdf").
Étape 5 - Utilisez la méthode include() pour vérifier si le type du fichier sélectionné est inclus dans le tableau AllowTypes.

Si vous êtes dans le tableau autoriséTypes, affichez le nom du fichier à l'écran.

Si le type de fichier est introuvable, suivez les étapes ci-dessous.
Étape 6 - Afficher un message d'avertissement à l'utilisateur indiquant "Type de fichier invalide. Veuillez sélectionner un fichier JPEG, PNG ou PDF
Étape 7 - Effacez le nom du champ de saisie du fichier en définissant document.getElementById('fileInput').value sur une chaîne vide.

Exemple

Dans l'exemple ci-dessous, nous essayons de valider le type de fichier lors du téléchargement en utilisant la méthode ci-dessus -

<!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>

Après avoir exécuté la procédure ci-dessus, essayez de télécharger le fichier Si le fichier est ".jpg", ".png" ou ".pdf", le nom du fichier s'affichera à l'écran. Sinon, un avertissement indiquant "Type de fichier invalide" s'affichera.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript 字符串

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Type de données de symbole en javascriptArticle suivant：Type de données de symbole en javascript

Articles Liés

Voir plus