[javascript] Accéder aux dimensions d'une image - avant de l'uploader??

Bjour à tous

Est-il possible d'accéder aux dimensions d'une image avant d'uploader celle-ci?

Par exemple, dans un formulaire html, un bouton parcourir => l'utilisateur choisi l'image;
Et lorsqu'il appuie sur le bouton "envoyer le formulaire", une fonction JS se lance et fais un form.submit() si l'image est de bonne dimensions, et un alert("erreur") si l'image est trop grande.


merci d'avance

Bonne question...
j'aurais tendance à prendre l'url du fichier dans le input type file:
http://www.w3schools.com/htmldom/dom_obj_fileupload.asp

à instancier l'image en javascript(c'est lourdingue mais bon) et récupérer ses width et height:
http://www.w3schools.com/htmldom/dom_obj_image.asp

résultat (ça pourra toujours me servir):


t1 j'en ai chié pour le débugger :D , il reste un bug si l'image vient d'un lecteur réseau (en UNC) il faudrait réencoder l'url je pense..
;)
edit: quelques correction.

C'est voué à l'échec : tu n'as pas le droit d'accèder au système de fichier en javascript selon certaines conditions. Le mieux c'est d'uploader l'image, et de vérifier avec php.

Surtout que cela te permet de vérifier le format...

Sans-Nom a écrit:
C'est voué à l'échec : tu n'as pas le droit d'accèder au système de fichier en javascript selon certaines conditions. Le mieux c'est d'uploader l'image, et de vérifier avec php.

Surtout que cela te permet de vérifier le format...

donc pour connaitre les dimensions tu l upload et ensuite tu la re upload pour etre sur ;)

tu l'uploade une fois, tu ne renvoie une erreur que si ça dépase, mais dites, ça marche mon truc, on ne peut pas ouvrir un fichier, mais on peut ouvrir un image en local, et avoir non pas la taille du fichier mais la taille de l'image, ce qui limité les dégâts.

Sinon, il y a sûrment moyen d'écrire une applet pour vérifier le fichier en local, mais c'est tellement plus simplet de l'uploader...
:)

quazardous> si tu fais un système de sessions, tu peux éviter ça hein (en conservant le fichier uploadé justement). C'est ce que font la plupart des scripts php.

Note que cela permet aussi de limiter la casse au niveau taille de fichier, et type de fichier.

Sans-Nom a écrit:
quazardous> si tu fais un système de sessions, tu peux éviter ça hein (en conservant le fichier uploadé justement). C'est ce que font la plupart des scripts php.

Note que cela permet aussi de limiter la casse au niveau taille de fichier, et type de fichier.

ça fonctionne niquel ton petit script !!
merci beaucoup, c'est exactement ce qu'il me fallait!

:clap:
y'a juste que le 'onclick' est mis au mauvais endroit (sur le 'submit' c plus logique)

gotcha_007 a écrit:
ça fonctionne niquel ton petit script !!
merci beaucoup, c'est exactement ce qu'il me fallait!

:clap:
y'a juste que le 'onclick' est mis au mauvais endroit (sur le 'submit' c plus logique)

:super: c'est cool, content d'avoir rendu service.

Sur ce que disaient les autres, c'est vrai qu'il vaut mieux doubler le contrôle côté PHP.
On ne peut pas compter sur un contrôle javascript à 100% parce qu'on peut désactiver javascript et soumettre le formulaire sans contrôle.

oui je comprends bien, mais là c'est juste pour informer l'utilisateur que son image est trop grande...pour lui dire que ça risque de prendre du temps si il ne la redimenssionne pas...

et c'est un peu idiot de charger l'image sur le serveur puis de dire 'attention l'image que vous avez envoyée était trop grande...vous avez dû attendre longtemps, dommage pour vous.'

enfin j'exagère mais c'est bien pour dire que dans mon cas, un contrôle côté client est bcp plus pratique.
Je me demande même s'il n'est pas possible de redimmenssionner l'image avec javascript...non??

Non. Car une image de grande taille ne signifie pas un grand poids.

[edit] Aussi, c'est à l'utilisateur de savoir ce qu'il envoie. Toi tu lui précise juste des informations sur la taille max, etc.

gotcha_007 a écrit:
oui je comprends bien, mais là c'est juste pour informer l'utilisateur que son image est trop grande...pour lui dire que ça risque de prendre du temps si il ne la redimenssionne pas...

et c'est un peu idiot de charger l'image sur le serveur puis de dire 'attention l'image que vous avez envoyée était trop grande...vous avez dû attendre longtemps, dommage pour vous.'

enfin j'exagère mais c'est bien pour dire que dans mon cas, un contrôle côté client est bcp plus pratique.
Je me demande même s'il n'est pas possible de redimmenssionner l'image avec javascript...non??

Oui, c'est comme ça que je comprend les contrôles javascript, ça aide l'uttilisateur "attention votre image est trop grande" etc.
Un fois uploadé, il faut faire comme sur les site de tirage photo, tu garde les images dans un album, et tu averti l'utilisateur en face des photo si l'image est trop grosse ou trop petite.

Tu ne peux pas redimensionner en Javascript.
Par contre, tu doit pouvoir le faire côté serveur, pour gagner le la place en BD, ce qui ne change évidemment rien au temps d'upload, mais je pense qu'il faut faire avec :neutre:

Sans-nom: tout à fait, la taille du fichier n'est pas fonction de celle de l'image, mais ça permet au moins d'avertir l'utilisateur et de lui donner un ordre de grandeur de son image, s'il a par erreur donné une image non redimensionnée, il pourra s'en rendre compte en voyant sa taille.
;)

Mais tu ne pe

deltree a écrit:
Mais tu ne pe

Ah bon? je croyais... :D

Pour ce qui est du poids d'une image, il reste quand même proportionnel aux dimensions dans la plupart des cas...j'ai rarement vu une image de 100*100 plus lourde qu'une image de 800*600... :heink: :??:

Pour le redimensionnement proprement dit, je le gère déjà en php, donc pas de soucis pour ça. Le javascript servira uniquement à avertir l'utilisateur. :)

gotcha_007 a écrit:
Ah bon? je croyais... :D

:MDR une faute de mise en forme, je ne sais même plus ce que je voulais dire.

D'accord avec toi, ça marchera dans la majorité des cas, mais s'ils envoient un .bmp par exemple, la taille va exploser et à l'inverse, s'ils envoie un .jpg over-compressé qui contient en majorité la même couleur, la taille sera ridicule.
:)

Bonjour,
il existe un champ caché à rajouter avant votre balise input type file pour vérifier la taille de l'image avant que celle-ci ne soit chargée. Ce champ doit s'appeler : max_file_size



là dans cet exemple, ça n'accepte que les fichiers inférieurs à 100.000 Ko