Vérifier dimensions d'une image côté client [javascript]
lilouaina
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
kaelkaelkael -
kaelkaelkael -
Bonjour,
Je souhaite créer une fonction (javascript) qui retourne true ou false en fonction de si la taille d'une image choisie à l'aide de la balise <input type="file" /> est inférieur ou supérieur à 800x600px avant d'uploader l'image sur le serveur. NB: je tiens absolument à ce que la fonction retourne une valeur booleenne.
Quelqu'un peut-il m'aider? ça fait des jours que je suis coincée là dessus.
<script type="text/javascript">
function verifTaille(){
file = document.getElementById("myFile").files[0];
window.URL = window.URL || window.webkitURL;
img = new Image();
img.src = window.URL.createObjectURL(file);
if(img.width > 800 || img.height > 600){
return false;
}else{
return true;
}
}
function verifier(){
if (verifTaille()){
alert("votre image est trop grande, veuillez en choisir une autre");
}else{
uploaderFichier();
}
}
</script>
et dans body :
<body>
...
<input id="myFile" type="file" onchange="verifier()">
...
</body>
Je souhaite créer une fonction (javascript) qui retourne true ou false en fonction de si la taille d'une image choisie à l'aide de la balise <input type="file" /> est inférieur ou supérieur à 800x600px avant d'uploader l'image sur le serveur. NB: je tiens absolument à ce que la fonction retourne une valeur booleenne.
Quelqu'un peut-il m'aider? ça fait des jours que je suis coincée là dessus.
<script type="text/javascript">
function verifTaille(){
file = document.getElementById("myFile").files[0];
window.URL = window.URL || window.webkitURL;
img = new Image();
img.src = window.URL.createObjectURL(file);
if(img.width > 800 || img.height > 600){
return false;
}else{
return true;
}
}
function verifier(){
if (verifTaille()){
alert("votre image est trop grande, veuillez en choisir une autre");
}else{
uploaderFichier();
}
}
</script>
et dans body :
<body>
...
<input id="myFile" type="file" onchange="verifier()">
...
</body>
A voir également:
- Vérifier dimensions d'une image côté client [javascript]
- Verifier compatibilite windows 11 - Guide
- Filezilla client - Télécharger - Téléchargement & Transfert
- Légender une image - Guide
- Image iso - Guide
- Verifier un lien - Guide
3 réponses
Regarde la réponse sur ce post : https://stackoverflow.com/questions/6633190/get-image-height-and-width-in-file-tag-javascript
=> PHP tu peux récupérer
=> JavaScript tu peux pas...
=> PHP tu peux récupérer
=> JavaScript tu peux pas...
Merci pour ta réponse. J'ai jeté un coup d'oeil sur le post.
Ce que je trouve énervant, c'est que je peux afficher les dimensions de l'image, mais je ne peux absolument pas les récupérer.
pour l'affichage c'est:
img.onload = function(){
alert(this.width + "x" + this.height);
}
Ce que je trouve énervant, c'est que je peux afficher les dimensions de l'image, mais je ne peux absolument pas les récupérer.
pour l'affichage c'est:
img.onload = function(){
alert(this.width + "x" + this.height);
}
Pour ceux qui seraient confrontés au même problème, voir la solution ici:
https://openclassrooms.com/forum/sujet/verifier-dimensions-d-une-image-cote-client-91578
https://openclassrooms.com/forum/sujet/verifier-dimensions-d-une-image-cote-client-91578
<input name="getimage" type="file" id="getimage"><p> </p> <div class="error left-align" id="err-imgsize">Les dimensions de l'image sont trop grandes<p> </p></div> <div id="imgstore"></div>
<script>
var input = document.getElementById("getimage");
function verifTaille(){
file =input.files[0];
window.URL = window.URL || window.webkitURL;
img = new Image();
img.onload = function(){
if(img.width > 800 || img.height > 600){
pasGlop(img.width-800, img.height-600);
}else{
glop(img.width, img.height);
}
}
img.src = window.URL.createObjectURL(file);
}
function glop(width, height){
var store = document.getElementById('imgstore');
store.innerHTML='<img src="' + img.src +'" width="100%">';
}
function pasGlop(width, height){
// pour une alerte
var str = "votre image est trop "
if(width>0){str+="large de "+width+"px";}
if(width>0 && height>0){str+=" et trop ";}
if(height>0){str+="haute de "+height+"px.";}
alert(str);
var store = document.getElementById('imgstore');
store.innerHTML='';
document.getElementsByName("getimage")[0].value = ""; //efface le input
//pour une animation, avec le css et la balise class=error
$('#err-imgsize').show(500);
$('#err-imgsize').delay(4000);
$('#err-imgsize').animate({
height: 'toggle'
}, 500, function () {
// Animation complete.
});
error = true; // change the error state to true
}
input.onchange=verifTaille;
</script>
.error {
color: #CF0000;
display: none;
}
.invisible {
display:none;
visibility:visible;
}