11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous les Alsanautes,


J'ai un pitit souci concernant la vérification du type des fichiers que les utilisateurs peuvent envoyer grace à mon formulaire. J'ai récupéré un script d'upload d'image que j'ai arrangé à ma sauce et qui fonctionne bien. Par contre je voudrais pouvoir verifier que l'utilisateur envoi bien une image de type jpg ou gif ou png.

Le champ de mon formulaire pour envoyer 3 images maximum est comme ceci
($i=0; $i < $max_images; $i++) 		   
           { 
echo "\t\t".'<input type="file" class="styleimage"  id="image'.$i.'"  name="image'.$i.'" value="" onChange="verif_extension(image'.$i.'.value);" />'."<br />\n";  
         }


la verification de l'extension est une fonction javascript (elle aussi récupérée et adaptée)

function clearFileInput() 
{ 
    var oldInput = document.getElementById("image0"); 
	var newInput = document.createElement("input"); 
    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    oldInput.parentNode.replaceChild(newInput, oldInput); 
}
function recup_extension(fichier) // fonction de récupération extension fichier
   {
         if (fichier!="")// si le champ fichier n'est pas vide
         {
            nom_fichier=fichier;// on récupere le chemin complet du fichier
            nbchar = nom_fichier.length;// on compte le nombre de caractere que compose ce chemin
            extension = nom_fichier.substring(nbchar-4,nbchar); // on récupere les 4 derniers caracteres
            extension=extension.toLowerCase(); //on uniforme les caracteres en minuscules au cas ou cela aurait été écris en majuscule...
            return extension; // on renvoi l'extension vers la fonction appelante
         }
   }

function verif_extension(fichier)// fonction vérification de l'extension aprés avoir choisi le fichier
   {
   ext = recup_extension(fichier);// on appelle la fonction de récupération de l'extension et on récupere l'extension

            if(ext==".jpg"||ext==".gif"||ext==".png" ||ext==".jpeg"){}// si extension = a une des extension suivante alors tout est ok donc ... pas d'erreur
            else // sinon on alert l'user de la mauvaise extension
            { 
	             alert("Attention les images au format '"+extension+"' ne sont pas autorisées !\n");
				clearFileInput();
            }
   }

Avec ce code lorsque l'utilisateur entre un lien d'image invalide dans le champ "FILE" le script le detecte tout de suite et vide le champ, par contre si l'utilisateur remet un lien invalide pdans ce champ, la fonction ne detecte pas que l'extension du fichier est invalide...

Pouvez-vous m'aider ?

Merci à tous ceux et toutes celles qui pourront m'eclairer



-----------------------------
Bon j'ai trouvé , enfin je crois Smiley lol
Modifié par pareto (02 Apr 2010 - 10:57)
Bonjour -
un petit commentaire (qui je pense l'a rien à voir avec ton problème) - si tu isoles les 4 derniers caractères tu vas sans doute avoir un problème avec les extensions à 4 lettres (html, jpeg, etc). Je vois en particulier dans ton script que tu testes si l'extension est égale à '.jpeg' ca qui fait 5 caractères.
Par ailleurs pourrait tu expliquer comment tu as résolu ton problème, le sujet m'intéresse ?
Merci
Olivier
salut

et si javascript est désactivé? si tu veux une classe php5, j'en ai une facile d'emploi et bien sécurisée, elle filtre même les doubles extensions, il faut y penser aussi Smiley cligne , un fichier du genre fichier.php.jpg peut être interprété comme du php...
Modifié par keran (02 Apr 2010 - 20:04)
salut

désolé de ne pas avoir répondu plus tôt mais j'ai beaucoup de boulôt en ce moment.

la classe :


//supprimée


pour tester


<html>
<head>
<div>
<p>Les fichiers soumis seront aux formats suivants : gif, jpg, jpeg ou png et ne doivent pas dépass&eacute;s 2Mo.</p>
<form enctype="multipart/form-data" action="upload.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />
<fieldset id="cadre1">
<legend> &nbsp;fichier &agrave; transf&eacute;rer &nbsp;</legend><br />
<input type="file" size="50" name="fichier" /><br /><br />
<input type="submit" name="envoi" value="soumettre le fichier" />
</fieldset>
</form>
</div>
</head>
</html>


pour l'appel de la classe, action du formulaire


include_once 'upload.php';

$tele = new Upload();
echo $tele->methodeFinal();


edit : une guillement double en trop dans la dernière méthode de la classe, balise img et certaines constantes qui ne passent pas le formulaire de soumission, celui du forum pas l'exemple.remplacée par une balise bbcode langue.
Modifié par keran (10 Apr 2010 - 14:48)
les constantes POIDS ne passent pas sur le forum, elles sont remplacées, à corriger avant tout dans la méthode retourErreur. désolé mais je ne peux rien y faire.
Modifié par keran (07 Apr 2010 - 17:53)