bonjour,
pour mon site de recette je cherche a me faire un formulaire permettant d'editer ou ajouter une recette, avec la possibilité d'envoyer un fichier image.
Le publique que je connais en partie , est bien souvent peut habituer aux ordinateur et je souhaitais ajouter des fonctionnalités "rassurante" , comme la previsualisation d'une image avant l'upload.
Mes test me conduisent a reussir avec IE et ff . mais je comprend pas pourquoi cela ne marche pas dans opera ?
Pour infos : ff lance le script apres l'ouverture de la boite de dialogue , IE avant , .... c'est le pourquoi du commentaire conditionnel.
page d'essai a copier coller et a essayer en local (pas besoin d'envoyer l'imlage
ou que se soit ):
j'ai essayer aussi en creant a la volée l'attribut "src" dans la balise image ... mais la c'est IE qui est dans les choux.
est ce perdu d'avance ?
gcyrillus
Modifié par gcyrillus (28 Sep 2006 - 00:03)
pour mon site de recette je cherche a me faire un formulaire permettant d'editer ou ajouter une recette, avec la possibilité d'envoyer un fichier image.
Le publique que je connais en partie , est bien souvent peut habituer aux ordinateur et je souhaitais ajouter des fonctionnalités "rassurante" , comme la previsualisation d'une image avant l'upload.
Mes test me conduisent a reussir avec IE et ff . mais je comprend pas pourquoi cela ne marche pas dans opera ?
Pour infos : ff lance le script apres l'ouverture de la boite de dialogue , IE avant , .... c'est le pourquoi du commentaire conditionnel.
page d'essai a copier coller et a essayer en local (pas besoin d'envoyer l'imlage
ou que se soit ):<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>TEST - Aperçu image avant upload</title>
<style type='text/css'>
* {float:left;clear:left;}
img {padding:10px;border:#555 solid 3px;margin:5px;background:#999;}
p {overflow:hidden;background:#eee;text-align:center;width:225px;border:1px solid #000;}
span {border:1px solid #000;width:223px;border-top:2px solid #000}
</style>
<script type='text/javascript'>
function voirimg() {
var imgsrc=document.getElementById('monchamp').value;
apercu='file:///'+imgsrc; //pour ff entre autre
document.getElementById('lavoir').src= apercu;
}
function voirIE()
{
voirimg();
tailleit();
}
function tailleit() {
var timg="";
timg = document.getElementById('lavoir').fileSize;
var tailleimg = document.createElement("span");
var lataille = document.createTextNode('taille en octets :'+ timg );
tailleimg.appendChild(lataille);
var affiche = document.getElementById("info");
affiche.appendChild(tailleimg);
}
</script>
</head>
<body>
<form>
<input type="file" id="monchamp" onclick="voirimg();" />
<p id="info">
<img src="#" alt="" id ='lavoir' height='190' width='190' />
</p>
<imput type="Submit" id="go" name="go" value= "upload" />
<!--[if IE]><p onclick="voirIE();">afficher l'aperçu</p><! endif -->
</form>
</body>
</html>j'ai essayer aussi en creant a la volée l'attribut "src" dans la balise image ... mais la c'est IE qui est dans les choux.
est ce perdu d'avance ?
gcyrillus
Modifié par gcyrillus (28 Sep 2006 - 00:03)
test fait !