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.

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

JavaScript

Discussions similaires

Partager

Partager