Valider type d'image en utilisant javascript

Question

i ont une forme comme ceci:

<form method=post src=upload enctype="multipart/form-data"> 
    <input name="img1" id="img1" type="file"> 
    <input type="submit" value="Upload"> 
</form > 

S'il vous plaît comment puis-je valide ce formulaire en javascript pour que seuls les fichiers jpg sont téléchargés. Merci d'avoir lu.

Answer 1

Vous pouvez lier l'événement onsubmit de votre formulaire, et vérifier si le value de votre fichier d'entrée se termine par « .jpg » ou « .jpeg », quelque chose comme ceci:

window.onload = function() { 
    var form = document.getElementById('uploadForm'), 
     imageInput = document.getElementById('img1'); 

    form.onsubmit = function() { 
    var isValid = /\.jpe?g$/i.test(imageInput.value); 
    if (!isValid) { 
     alert('Only jpg files allowed!'); 
    } 

    return isValid; 
    }; 
}; 

Vérifiez l'exemple ci-dessus here.

Answer 2

Une recherche Google a déterré ceci: http://www.webdeveloper.com/forum/archive/index.php/t-104406.html

Pour votre application, je vous recommande d'utiliser l'entrée par:

function valid(a){ 
    return a.indexOf(".jpg") != -1 && a.type == file; 
} 

Cela devrait fonctionner.

Answer 3

Vous pouvez utiliser le « accepter » paramter à la balise d'entrée:

<input name="img1" id="img1" type="file" accept="image" /> 

Son pas JavaScript, mais devrait encore être utile pour empêcher l'utilisateur de même tenter de télécharger un fichier non-image.

Answer 4

71944 a une certaine javascript qui semble faire ce que vous avez besoin. Gardez à l'esprit que ce n'est que la validation côté client, donc vous aurez toujours envie de le valider sur le serveur aussi.

Answer 5

Forme: -

<form method=post src=upload enctype="multipart/form-data" onsubmit="return validateFile()"> 
<input name="img1" id="img1" type="file"> 
<input type="submit" value="Upload"> 
</form> 

code Javascript: -

 function validateFile() 
     { 
      var allowedExtension = ['jpeg', 'jpg']; 
      var fileExtension = document.getElementById('img1').value.split('.').pop().toLowerCase(); 
      var isValidFile = false; 

       for(var index in allowedExtension) { 

        if(fileExtension === allowedExtension[index]) { 
         isValidFile = true; 
         break; 
        } 
       } 

       if(!isValidFile) { 
        alert('Allowed Extensions are : *.' + allowedExtension.join(', *.')); 
       } 

       return isValidFile; 
     } 

si vous souhaitez ajouter d'autres extensions d'image s'il vous plaît ajouter dans le tableau allowedExtension;

var allowedExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];