Récupérer les dimensions d'une image d'un champ input file

identifiant_bidon · 08/05/2011, 18h17

Bonjour à tous,

Je dispose d'un champ input de type file. Je sais comment récupérer, sur le onChange de cet élément, la taille du fichier concerné :

Code :

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

<input type="file" id="myFile" onChange="this.files[0].size"/>

Par contre, quelqu'un saurait-il me dire, comment faire pour récupérer le height et le width de l'image concernée ?

Merci beaucoup

Bovino · 09/05/2011, 08h26

A ma connaissance, size n'est reconnu que par Firefox depuis la version 3.6 quant aux dimensions de l'image, c'est pas possible coté client.

sekaijin · 09/05/2011, 09h48

Attention testé uniquement sous FF

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
function change(input) {
  re = new RegExp('image/');
  if (input.files[0].type.match(re)) {
    // on a à faire à une fichier image
    // on créé un élément IMG
    var img = document.createElement('img');
    //on met le contenu du fichier dans l'image
    img.src=input.files[0].getAsDataURL();
    // on ne l'affiche pas
    img.style.display='none';
    // la taille ne sera dispo que losque l'image sera chargée
    img.onload=function() {
      //on affiche la taille
      alert('width: ' + this.width + ' height: ' + this.height);
      //on a plus besoin de l'élément IMG
      document.body.removeChild(this);
    }
    //on attache l'image au DOM
    document.body.appendChild(img);
  } else {
    //on n'a pas une image
    alert('not an image');
  }
}

Code html :

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

1
2
3
4
5
6
7
8
<html>
  <head>
    <script src="showSize.js" type="text/javascript"></script>
  </head>
  <body>
    <input type="file" onChange="change(this)">
  </body>
</html>

A+JYT

identifiant_bidon · 10/05/2011, 09h54

merci beaucoup Bovino et sekaijin.

Alors effectivement, size n'est reconnu que par Firefox. J'ai testé sous IE et Chrome et j'ai une belle erreur javascript.
Idem pour le code que tu as fourni sekaijin (et je t'en remercie

). Il ne fonctionne que sous FF.

Si quelqu'un a une solution compatible au moins FF, IE et CHROME, je suis preneur !!

Merci

Bovino · 10/05/2011, 10h06

A part en passant par Flash, il n'existe pas de solution coté client.

08/05/2011, 18h17	#1
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	Récupérer les dimensions d'une image d'un champ input file Bonjour à tous, Je dispose d'un champ input de type file. Je sais comment récupérer, sur le onChange de cet élément, la taille du fichier concerné : Code : Sélectionner tout - Visualiser dans une fenêtre à part <input type="file" id="myFile" onChange="this.files[0].size"/> Par contre, quelqu'un saurait-il me dire, comment faire pour récupérer le height et le width de l'image concernée ? Merci beaucoup __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

09/05/2011, 08h26	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 802 Points : 35 802	A ma connaissance, size n'est reconnu que par Firefox depuis la version 3.6 quant aux dimensions de l'image, c'est pas possible coté client. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

10/05/2011, 09h54	#4
identifiant_bidon Membre habitué Inscription : juillet 2006 Messages : 664 Détails du profil Informations forums : Inscription : juillet 2006 Messages : 664 Points : 132 Points : 132	merci beaucoup Bovino et sekaijin. Alors effectivement, size n'est reconnu que par Firefox. J'ai testé sous IE et Chrome et j'ai une belle erreur javascript. Idem pour le code que tu as fourni sekaijin (et je t'en remercie ). Il ne fonctionne que sous FF. Si quelqu'un a une solution compatible au moins FF, IE et CHROME, je suis preneur !! Merci __________________ Le seul, le vrai Facebook killer https://www.weetool.com
	00

10/05/2011, 10h06	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 802 Points : 35 802	A part en passant par Flash, il n'existe pas de solution coté client. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email