upload d'image et verification d la taille (hauteur/largeur) [Sources]

**NoobX** · 12/12/2005, 13h25

bonjour @ tous

ma situation :

un formulaire (php) qui permet d'enregistrer diverses données concernant le visiteur ainsi qu'une image le tous dans une base de donnée.

=> ca fonctionne bien jusque là !

mon objectif :

dans ce meme formulaire je voudrai controler la taille (hauteur / largeur)de l'image que desire uploader le visiteur et si l'image est plus grande que la taille maxi soit 100px par 200px alors une fenetre (message box) apparait pour dire que l'image est trop grande et qu'il faut la reduire avant de faire le upload!

J'ai bien trouvé comment faire en php mais je preferai le javascript afin de detecter la taille avant la validation du formulaire !

merci et bonne continuation @ tous

**siddh** · 12/12/2005, 13h29

salut,
malheureusement, tu risque de pas pouvoir le faire sur tous les navigateurs.

Pour connaitre ses dimensions, tu n'as pas d'autre choix que de l'affecter a ta page.
Tu peux le faire en declenchant sur le onchange de ton input file un changement de src d'une img de ta page.

Par contre, ca marche tres bien dans ie et pas dans firefox !

**NoobX** · 12/12/2005, 13h32

ok super
Les visiteurs utilisent uniquement internet Explorer ! (intranet pro)

si il était possible d'avoir un peu plus de précision sur la methode a adopté ca serai vraiment cool

merci

**SpaceFrog** · 12/12/2005, 13h43

colle ton image dans une balise en visibility hidden sans préciser de largeur ni de hauteur et récupère le offsetHeight ou computedHeight de ta balise ...

**siddh** · 12/12/2005, 13h44

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
<html>
  <head>
    <title>Detection taille image</title>
    <script type='text/javascript'>
    	function verif(val){
		im = document.getElementById('monimg');
		cont = document.getElementById('container');
		im.src = val;
		alert("Hauteur "+cont.offsetHeight+" Largeur "+cont.offsetWidth);
	}
    </script>
  </head>
  <body>
  	<div id="container">
  		<img id="monimg" alt="test de l'image" src="" />
	</div>
	<input type="file" onchange="verif(this.value)" />
 
  </body>
</html>

Bon je teste les dimensions du div car c'est un élément de type block et que normalement, un element inline comme une image n'a pas de taille.

Si tu veux masquer l'image, tu peux. Met des dimensions de 1px au div avec un overflow hidden. Ca devrais marcher.

**NoobX** · 12/12/2005, 14h19

merci beaucoup

je vais abuser un peu mais je voudrais ajouter une condition qui dit:

si la largeur est superieur a 200 px j'affiche un message (ex trop large)
si hauteur superieur à 100 px j'affiche (ex : trop haut)
cela vide automatiquement le champs input file
enfin si tout est bon on dit rien

J'ai essayer avec quelque chose comme ca :
if(cont.offsetHeight<100) {
alert("...);

mais a ne marche pas !

en ce qui concerne l'affichage de l'image c'est parfait !

en tous cas merci beaucoup !

**siddh** · 12/12/2005, 14h31

euh tu me dis > et tu met < ...

il faut mettre un parseInt :

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
<html>
  <head>
    <title>Detection taille image</title>
    <script type='text/javascript'>
    	function verif(val){
		im = document.getElementById('monimg');
		cont = document.getElementById('container');
		im.src = val.value;
		if(parseInt(cont.offsetHeight) > 100){
			alert("Hauteur "+cont.offsetHeight+" Largeur "+cont.offsetWidth);
			val2 = document.createElement("input");
			val2.type = "file";
			val2.name= "monfile";
			val2.onchange = function(){
				verif(this);
			}
			val.parentNode.replaceChild(val2,val);
			im.src = "";
		}
	}
    </script>
  </head>
  <body>
  	<div id="container">
  		<img id="monimg" alt="test de l'image" src="" />
	</div>
	<input type="file" name="monfile" onchange="verif(this)" />
 
  </body>
</html>

Pour le value, on est obligé de recréer un file car on ne peut pas dynamiquement changer sa valeur(sécurité oblige).

**NoobX** · 12/12/2005, 15h04

je viends de faire differents tests :

1, il me semble (arrete moi si j me trompe) que tu as oublier ".value" a la fin dans onchange

Code :

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

<input type="file" name="monfile" onchange="verif(this)" />

2, ensuite le champs reste rempli meme si l'image est trop grande donc si le visiteur clique sur envoyer, l'image sera quand meme enregistrer alors qu'elle n'est pas valide !

3,comment controler largeur et hauteur simultanément ?

Si je permet de faire ces remarques c'est uniquement afin de mieux comprendre l'utilisation de tel script

encore une fois je réhitere mes remerciement pour vos réponses notamment siddh qui me propose en plus des exlications des exemples !

**siddh** · 12/12/2005, 15h08

as tu testé le deuxieme script ?

je ne met pas value car je passe directement l'objet complet pour pouvoir m'en servir de reference pour le remplacer.

il suffit de mettre une condition multiple pour ton test :
si h > 100 || l > 200

**SpaceFrog** · 12/12/2005, 15h16

pour le .value non il n l'a pas oublié il passe l'objet en paramètre et c'est au niveau de la fonction qu'il récupère le value ...

pour remettre a vide l'input file je ne sais pas si on peut forcer la valuer à '' ...
a priori un rapide test tend à prouver que non ...
il faudra à ce moment passer par un champs hidden ..

**siddh** · 12/12/2005, 15h18

ben je le remplace par un autre tout nouveau tout vide

**NoobX** · 12/12/2005, 15h47

ok !

bon alors je fais un mega "meacoulpa" pour mes remarques qui n'avaient effectivement pas lieu d'etre!
vous pouvez me

! lol!

ensuite j'ai tester a nouveau et en suivant vos explications et cla fonctionne fort bien !

En revanche il me semble (aye aye pourvu que je ne dise pas une autre conn...) si on met une limite a 100 est que l'image fais 100 il y a erreure mais si on met une limite à 105 par ex plus de prob !
il me semble avoir lu une remarque de SpaceFrog a ce sujet dans un autre topic!

enfin une tite question pas chere : pour verifier hauteur et largeur :

Code :

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

      if(parseInt(cont.offsetHeight) > 105 || parseInt(cont.offsetHeight) > 200)

ou bien

Code :

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

1
2
 
      if(parseInt(cont.offsetHeight) > 105 || (cont.offsetWidth) > 200)

?

je vous remercie pour votre aide, vos exemples et vos explications !

Je laisse ce topic un peu ouvert le temps de vor si j'ai pas d'autre question

**siddh** · 12/12/2005, 17h38

alors pour l histoire du 100 ou 105, tu peux mettre >=

sinon, répète le parseInt oui

**denisC** · 13/12/2005, 08h58

Envoyé par NoobX

En revanche il me semble (aye aye pourvu que je ne dise pas une autre conn...) si on met une limite a 100 est que l'image fais 100 il y a erreure mais si on met une limite à 105 par ex plus de prob !
il me semble avoir lu une remarque de SpaceFrog a ce sujet dans un autre topic!

Code :

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

1
2
 
parseInt(string,10)

Vive la base 10!!!!

pour info, si tu fais un parseInt(100), ça te donne: 64... Et oui, les joies de l'octal (ce qui explique ton problème).

**NoobX** · 13/12/2005, 13h21

bonjour 8)

j'observe des comportements plutot aléatoire avec ma page web :

1, pour autoriser une image de 61 px de haut par 188 de large je dois mettre :

if(parseInt(cont.offsetHeight) > 65 || parseInt(cont.offsetWidth) > 408)

J'ai du mal à comprendre

2, la detection ne se fait pas à tout les coups certaine fois des images faisant 3 à 4 fois la taille maximum ne declanche aucune alerte !

c'est le 2eme point qui me pose le plus de souci car aucune image de plus de 61 par 188 px ne doit etre enrgistrer !

Je joint 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/style.css" rel="stylesheet" type="text/css">
 <script type='text/javascript'> 
       function verif(val){ 
      im = document.getElementById('monimg'); 
      cont = document.getElementById('container'); 
      im.src = val.value; 
      if(parseInt(cont.offsetHeight) > 65 || parseInt(cont.offsetWidth) > 408)
	  { 
         alert("Hauteur "+cont.offsetHeight+" Largeur "+cont.offsetWidth); 
         val2 = document.createElement("input"); 
         val2.type = "file"; 
         val2.name= "logo"; 
         val2.onchange = function(){ 
            verif(this); 
         } 
         val.parentNode.replaceChild(val2,val); 
         im.src = ""; 
      } 
   } 
    </script> 
</head>
 
<body>
 
 
<div align="center">
  <p><font size="7">bonjour <? echo $_SERVER['PHP_AUTH_USER'];?> </font></p>
  <p><font color="#009933" size="5">veuillez remplir les informations vous concernant :</font></p>
  <p>&nbsp;</p>
  <form enctype="multipart/form-data" name="form1" method="post" action="distrivalid.php">
    <table width="84%" border="1" align="center" cellspacing="0" bordercolor="#333333">
      <tr> 
        <td width="50%" class="texte">Etablissement</td>
        <td width="50%"> <div align="center"> 
            <input name="distributeur" type="text" id="etab" size="20" maxlength="40" tabindex="1">
            <input name="pseudo" type="hidden" value="<? echo $_SERVER['PHP_AUTH_USER'];?>">
          </div></td>
      </tr>
      <tr> 
        <td width="50%" class="textedessus">LOGO</td>
        <td width="50%"> <div align="center"> 
            <input name="logo" type="file" size="20" maxlength="40" onchange="verif(this)">
          </div>
          <div id="container"> 
            <div align="center"><img id="monimg" alt="test de votre logo" src="" /> 
            </div>
          </div> </td>
      </tr>
      <tr> 
        <td width="50%" class="textedessus">adresse :</td>
        <td width="50%"> <div align="center"> 
            <input name="adresse" type="text" id="adresse" size="40" maxlength="40" tabindex="2">
          </div></td>
      </tr>
      <tr> 
        <td width="50%" class="texte">vi<span class="texte">ll</span>e :</td>
        <td width="50%"> <div align="center"> 
            <input name="ville" type="text" id="ville" size="20" maxlength="40" tabindex="3">
          </div></td>
      </tr>
      <tr> 
        <td width="50%" class="textedessus">code postal</td>
        <td width="50%"> <div align="center"> 
            <input name="cp" type="text" id="cp" size="8" maxlength="8" tabindex="4">
          </div></td>
      </tr>
      <tr> 
        <td width="50%" class="texte">t&eacute;l&eacute;phone :</td>
        <td width="50%"> <div align="center"> 
            <input name="tel" type="text" id="tel" size="20" maxlength="25" tabindex="5">
          </div></td>
      </tr>
      <tr> 
        <td width="50%" class="textedessus"> <div align="left"> 
            <p class="textedessus">fax :</p>
          </div></td>
        <td width="50%"> <div align="center"> 
            <input name="fax" type="text" id="fax" size="20" maxlength="25" tabindex="6">
          </div></td>
      </tr>
      <tr>
        <td class="textedessus">Mail :</td>
        <td><div align="center">
            <input name="mail" type="text" id="mail" size="20" maxlength="25" tabindex="6">
          </div></td>
      </tr>
      <tr> 
        <td width="50%" class="textedessus"><input type="reset" name="Submit2" value="R&eacute;tablir"></td>
        <td width="50%"><div align="center"> 
            <input type="submit" name="Submit" value="Envoyer">
          </div></td>
      </tr>
    </table>
  </form>
  <p>&nbsp;</p>
</div>
 
</body>
</html>

j'ai eu raison de ne pas fermer ce sujet car j me doutais bien qu j'allais avoir d'autres problemes

Merci et bonne continuation @ tous

**NoobX** · 13/12/2005, 13h38

une petite réctification :

Je crois avoir solutionner mon probleme n° 2 :
mon script etait comme ca :

Code :

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

      if(parseInt(cont.offsetHeight) > 65 || parseInt(cont.offsetWidth) > 408)

j'ai ajouter une parenthese pour qu'il devienne

Code :

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

     if((parseInt(cont.offsetHeight) > 65 || parseInt(cont.offsetWidth) > 408))

Il me semble que la detection se fait a chaque fois !

**NoobX** · 19/12/2005, 15h59

Bonjour @ tous !

apres de multiple test je rencontre quelques probleme avec ce script

En fait c'est trés aléatoire 90% du temps cela fonctionne mais les 10% restant me laissent perplexe !

Les 10% (de probleme) se decomposent en 2 comportement distincts :

1er cas :
l'image est plus grande que les limites définie mais le script ne detecte aucun probleme ! (pourtant il devrait ...)

2eme cas :
L'image est à la bonne taille (endessous des limites max définies) mais malgrés tout le script bloque le upload de la meme maniere que si l'image était trop grande !

si vous avez une idée des raisons de ce probleme ca m'aiderai bien

!

Merci

**siddh** · 19/12/2005, 16h19

Envoyé par denisC

Envoyé par NoobX

En revanche il me semble (aye aye pourvu que je ne dise pas une autre conn...) si on met une limite a 100 est que l'image fais 100 il y a erreure mais si on met une limite à 105 par ex plus de prob !
il me semble avoir lu une remarque de SpaceFrog a ce sujet dans un autre topic!

Code :

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

1
2
 
parseInt(string,10)

Vive la base 10!!!!

pour info, si tu fais un parseInt(100), ça te donne: 64... Et oui, les joies de l'octal (ce qui explique ton problème).

as tu essayé comme ca ?

**NoobX** · 19/12/2005, 16h40

bon si j'ai bien compris (rien n'es moins sur

)

j'ai essayer ta proposition sans succés !

Mon code d'origine :

Code :

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

if((parseInt(cont.offsetHeight) > 65 || parseInt(cont.offsetWidth) > 411))

Le code avec tes modifications :

Code :

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

if((parseInt(string,10) > 65 || parseInt(string,10) > 411))

mais dans ce cas tous les tailles sont acceptées ( a pu de verification)!

il ya de forte chance que je me sois trompé dans la mise en place des modifs....

**siddh** · 19/12/2005, 16h42

Code :

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

if((parseInt(cont.offsetHeight,10) > 65 || parseInt(cont.offsetWidth,10) > 411))

upload d'image et verification d la taille (hauteur/largeur) [Sources]

JavaScript

Discussions similaires

Partager

Partager