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

Version imprimable

08/05/2011, 18h17
identifiant_bidon

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:

<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
09/05/2011, 08h26
Bovino

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.

Attention testé uniquement sous FF

Code:

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:

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

10/05/2011, 09h54
identifiant_bidon

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 :ccool: ). Il ne fonctionne que sous FF.

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

Merci
10/05/2011, 10h06
Bovino

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