Discussion :

[Invité]

Bonjour à tous,
pour mon site j'aimerais mettre en place un formulaire d'upload d'image. L'utilisateur peut uploader jusqu'à 5 images.
D'habitude je fais les vérifications d'usage en PHP mais la j'aimerais pouvoir faire la vérification du poids et de la taille (largeur et hauteur) des images en javascript (c'est plus rapide coté client). Voici mon script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
	var ie = false;
	var number=0;
function Ajout(ou,nameFichiers)
{
	if(number<6)
		{	var d=document.createElement("div");
 
			var i=document.createElement("input");	// ajout input file
			i.type="file";
			i.name=nameFichiers+"[]"
			i.size=100000;
			if (ie)	i.dir="rtl";	// beau avec IE, pas avec les autres navigateurs
			d.appendChild(i);
 
			var b=document.createElement("input");	// ajout du bouton pour supprimer
			b.type="button";
			b.value="Supprimer";
			b.onclick=function()	{	this.parentNode.style.display="none";
											this.parentNode.innerHTML="";	 
											number --;}
			d.appendChild(b);
 
			ou.appendChild(d);							// ajout (input file + bouton) là où il faut.
			number ++;
	   }else{
		 alert("Désolé, l'upload simultané de fichiers est limité; à 5 pour des raisons de sécurité.");  
	   }
}
function Controle(new_pic,nameFichiers)
{	var ne=0;
	for ( var e=0;e<new_pic.elements.length;e++ )
	{	
		if (new_pic.elements[e].name==nameFichiers+"[]")
		{	ne++;
 
			if (new_pic.elements[e].value.length==0)
			{	alert("Fichier ("+ne+") non choisi");
				return false;
			}
			if(new_pic.elements[e].Width<2000){
				alert("Le fichier numéro ("+ne+") est trop petit. Veuillez choisir une image faisant au moins 200 pixels de haut par 200 pixels de large");
				return false;
			}
			if(new_pic.elements[e].Width>500){
				alert("Le fichier numéro ("+ne+") est trop grand. Veuillez choisir une image faisant au maximum 500 pixels de haut par 500 pixels de large");
				return false;
			}
			if(new_pic.elements[e].Size>1048576){
				alert("Le fichier numéro ("+ne+") est trop lourd. Veuillez choisir une image faisant au maximum 1 Mo");
				return false;
			}
			ns=ne;
			for ( var s=e+1;s<new_pic.elements.length;s++ )
			{	if (new_pic.elements[s].name==nameFichiers+"[]")
				{	ns++;
					if (new_pic.elements[e].value==new_pic.elements[s].value)
					{	alert("Fichier ("+ne+") en double ("+ns+")\r\n"+new_pic.elements[s].value);
						return false;
					}
				}
			}
		}
	}
	return true;
}

et le code dans la page d'upload

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php
$dossier = '../galleries/';
$chemin = 'galleries/';
$taille_max = 1048576;
$moment=date('YMDHis');
$extentions_ok = array ('jpg', 'JPG', 'JPEG', 'jpeg');
 
 
if (isset($_FILES['fic']['name']))
        {       
                for ( $n=0; $n<count($_FILES['fic']['name']) ;$n++ )
                {       if ( $_FILES['fic']['error'][$n]==0 )
                        {       
                                //fichier temporaire
                                $temp_img =  $_FILES['fic']['tmp_name'][$n];
                                //taille du fichier
                                $taille_img = $_FILES['fic']['size'][$n];
                                //nom de base du fichier
                                $img = $_FILES['fic']['name'][$n];
                                //extention du fichier
                                $extention_img = substr(strrchr($img, '.'), 1);
                                //nom final du fichier
                                $img = $moment.'_'.$n.'.'.$extention_img;
                                if($taille_img>0){
                                        if(in_array ($extention_img, $extentions_ok) && $taille_max>=$taille_img){
                                                $img = strtr ($img, 'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ','AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
                                                //on rempaces les caractères spéciaux par un _
                                                $img = preg_replace ('/([^.a-z0-9]+)/i', '_', $img);// or die("erreur sql dans new_product3 : ".mysql_error());
                                                move_uploaded_file ($temp_img, $dossier.$img);// or die("erreur sql dans new_product4 : ".mysql_error());
                                                $img = $chemin.$img;
                                                //echo("image numéro : ".$n."&nbsp;&nbsp;--&nbsp;&nbsp;image : ".$img."<br>");
                                                $Q2="INSERT INTO Photos (idPhoto, sourcePhoto) VALUES ('', '$img')";
                                                $R2=mysql_query($Q2) or die ('erreur sql dans new_produit 12 : '.mysql_error());
                                        }else{$msgErreur = "D&eacute;sol&eacute; le format du fichier num&eacute;ro ".$n." n'est pas accept&eacute;. Veuillez choisir une image au format jpg";}
                                }else{ $msgErreur .="Le fichier num&eacute;o ".$n." a un poids inf&eacute;rieur &agrave; 1 octet. Veuillez en choisir un autre";}
                                
                        }
                }
        }
?>
.....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<Script Type="Text/JavaScript" src="javascript/ajoutGallerie.js"></Script>
</head>
<body>
<form name="new_pic" id="new_pic" onsubmit="return(Controle(document.new_pic,'fic'));" action="" method="post" enctype="multipart/form-data">
                <fieldset>
                <input type="hidden" name="MAX_FILE_SIZE" value="1048576">
                <input 	type="button" value="Ajouter un Fichier" onclick="Ajout(document.new_pic,'fic');" />
                 <input type="submit" id="create_pic"  height="206px" width="303px" name="create_pic" value="Uploader les photos dans la galerie" />
              </fieldset>
                </form>
</body>

quand l'utilisateur clique sur le bouton ajouter un fichier, le script ajoute un champ. Lors de l'upload, il vérifie aussi que chaque champ est rempli et que les fichiers n'ont pas le même nom. Par contre la vérification de taille et de poids ne marche pas (du coup ça uploade n'importe quoi quand même).

Je ne vois pas bien ou ça coince donc un petit coup de pouce serait le bienvenu. Merci d'avance

[le_chomeur]

je ne te donne que les propriétés sur ton image exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<input type="file" id="test" />
 
var srcImg = document.getElementById('test').value ;
var img = new Image();
img.src = srcImg;
alert("Largeur : "+img.width+ " Hauteur : " +img.heigth + " poid : " +img.fileSize);