File input & infos fichier et dimensions image

Signaler
Messages postés
165
Date d'inscription
samedi 8 mai 2010
Statut
Membre
Dernière intervention
3 janvier 2015
-
Messages postés
165
Date d'inscription
samedi 8 mai 2010
Statut
Membre
Dernière intervention
3 janvier 2015
-
Bonjour,


Je travaille sur un formulaire d'upload de fichier, d'image pour être plus précis. J'aurais voulu savoir si il est possible de récupérer le nom temporaire de l'image sélectionnée via le bouton "parcourir" afin de connaitre ses dimensions ? Ou sinon connaissez vous un moyen de récupérer les dimensions d'une image, choisie via un input file, avant qu'elle ne soit uploadée sur le serveur (côté client quoi pas en php) ?



Merci pour vos rep !


@+!

5 réponses

Messages postés
130
Date d'inscription
lundi 11 janvier 2010
Statut
Membre
Dernière intervention
7 juin 2013

Tant que le fichier n'est pas uploadé sur ton serveur, je ne pense pas que tu puisses récupérer la taille de l'image. En effet, côté client, JS n'accède qu'au chemin+nom du fichier. Il n'y a que dans ton formulaire PHP que tu accède à la taille, au type...

Essaie avec Ajax.
Messages postés
165
Date d'inscription
samedi 8 mai 2010
Statut
Membre
Dernière intervention
3 janvier 2015

côté client, JS n'accède qu'au chemin+nom


OK nickel du coup si je peux récup le chemin de dossier du fichier (celui de l'ordi du client) en js ça peux le faire.

je le met dans une variable chemin_fichier et je fais ça :


img = new Image();

img.src = chemin_fichier;

img.onload = function()
{
  alert(img.width+" X "+img.height);

}

 



Seul problème comment on fait pour récup le chemin de dossier ???????


Merci ;-)
Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
134
pour ie <10 tu peut recuperer le chemin en donnant un id au input et faire

document.getElementById('mon input').value


pour les autres navigateurs tu peut connaitre la taille en utilisant filereader du fichier mais ca ne fonctionnera pas avec ie < 10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">

.box{
position:absolute;
background-color:gray;
height:200px;width:250px;
margin-top:120px;
margin-left:600px;
border:1px ridge #aaa;
-moz-box-shadow: 10px 10px 10px #212121;
-webkit-box-shadow: 10px 10px 10px #212121;
box-shadow: 10px 10px 10px #616161;
}

table td{
border:2px;
border-style:solid;
}

</style>

<script type="text/javascript">

function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}

function drop(e) {

if (!e) {
var fichier = document.getElementById('fileinput').files;
}
else {
var fichier = e.dataTransfer.files;
}

document.getElementById('nbfic').value=fichier.length

for(var j=0;j<fichier.length;j++){

var tbrow=document.getElementById("tabs").insertRow(-1)

tbrow.insertCell(0)
var zozo=document.createTextNode(fichier[j].size)
tbrow.cells[0].appendChild(zozo);	

tbrow.insertCell(1)
var zozo=document.createTextNode(fichier[j].name)
tbrow.cells[1].appendChild(zozo);	

tbrow.insertCell(2)
var zozo=document.createTextNode(fichier[j].type)
tbrow.cells[2].appendChild(zozo);		

}
}
</script>
</head>









nbr de fichier



taille de fichier,
nom de fichier,
type de fichier


</html>
Messages postés
1796
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 septembre 2021
134
un autre script qui precharge une image compatible tous navigateurs a tester tout de meme avec ie 9

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript">

function chacharge(){

if(document.all) {
var filename = document.getElementById('hiddenfile').value;
var Img = new Image();
Img.src = filename;
document.getElementById('mon_image').src = Img.src; 
}
else{
var fichier = document.getElementById('hiddenfile').files;

var charge=new FileReader();
charge.readAsDataURL(fichier[0]);
charge.onload = function(e){

document.getElementById('mon_image').src = e.target.result;
}
}
}

function getfile(){
    document.getElementById('hiddenfile').click();
}


</script>
</head>













</html>
Messages postés
165
Date d'inscription
samedi 8 mai 2010
Statut
Membre
Dernière intervention
3 janvier 2015

Merci pour ta réponse je vais tester tout ça et voir si ça fonctionne avec uploadify !