extensions de fichier de contrôle pour plus d'une case téléchargement

Question

Je veux permettre à l'utilisateur de télécharger uniquement pdf fichiers dans deux fichiers d'entrée:

<form onsubmit='return checkExt()' action='upload.php' method='POST'> 
    <label>upload the first file</label> 
    <input type='file' name='fileToUpload' id='fileToUpload' required> 

    <label>upload the secondfile</label> 
    <input type='file' name='fileToUpload1' id='fileToUpload1' required> 
</form> 

J'ai utilisé le script suivant pour vérifier l'extension des fichiers-to télécharger:

<script> 
    function checkExt() { 
     var allowedFiles = [".pdf"]; 
     var form_valid = document.getElementById("fileToUpload"); 
     var form_valid2 = document.getElementById("fileToUpload1"); 
     var regex = new RegExp("([a-zA-Z0-9\s_\\.\-:])+(" + allowedFiles.join('|') + ")$"); 

     if (!regex.test((form_valid.value.toLowerCase()) &&(form_valid2.value.toLowerCase()))) { 
      alert('only PDF files are allowed'); 
      return false; 
     } 
     return true; 
    } 
</script> 

le problème est le suivant: quand je le tester, il vérifie uniquement sur le premier fichier si elle est un pdf ou non. il ne vérifie pas sur le deuxième fichier.

Answer 1

Vous n'avez pas besoin de javascript pour valider les types de fichiers. Il suffit d'utiliser l'attribut accept dans la balise d'entrée.

Voir la documentation ici: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

<input name="myFile" type="file" accept=".pdf" multiple>

Answer 2

Votre deuxième chèque en si la condition doit refléter le premier et c'est la raison pour laquelle il ne fonctionne pas. Quoi qu'il en soit, la manière la plus simple et modulable consiste à parcourir les champs de saisie de type "fichier". Comme ceci:

function checkExt() { 
    var fileInputs = document.querySelectorAll('input[type="file"]'); 
    var isValid = true; 
    var allowedFiles = [".pdf"]; 
    var regex = new RegExp(
    "([a-zA-Z0-9s_\\.-:])+(" + allowedFiles.join("|") + ")$" 
); 

    fileInputs.forEach(function(input) { 
    if (!regex.test(input.value.toLowerCase())) { 
     isValid = false; 
    } 
    }); 

    if (isValid) { 
    alert("only PDF files are allowed"); 
    } 

    return isValid; 
} 

Cela vous permet d'ajouter autant de champs d'entrée de fichiers que vous le souhaitez.