prévisualiser une image avant upload
Bonjour à tous,
tout est dans le sujet: j'ai un formulaire (nommé form1) qui contient un champ d'upload de fichier (image) (type="file"), et je voudrais avoir un apperçu avant d'envoyer le formulaire.
J'ai des problêmes de compatibilité (marche sous IE mais pas firefox)
voici mon code:
la fonction javascript:
Code:
1
2
3
4
5
6
7
|
function previewImg(){
var str = new String(document.form1.photo.value);
str=str.replace(/\s/g,"%20"); //supprimer les espaces
str=str.replace(/\\/g,"/"); //remplacer les antislash par des slash
document.getElementById("prev").innerHTML='<img width=100 height=100 src="file:///'+str+'">';
} |
le code HTMl de base:
Code:
1
2
3
4
| <input type="file" name="photo" size="30" accept="image/*" onChange="javascript:previewImg()">
<div id="prev">
</div> |
Pourtant je n'obtiens rien sous firefox (Sous IE, pas de problême, la photo s'affiche correctement). Pourtant, lorsque je copie le nom de l'image dans la barre d'adresse ça fonctionne très bien, mais il n'arrive pas a l'afficher dynamiquement dans la page.
J'ai essayé de voir d'ou venait le problême (gros merci au passage du web developpement toolbar de firefox)
exemple, avec une image C:/temp/Image2.jpg:
si j'affiche les informations sur les images, il me dit:
Citation:
src:file:///C:/temp/Image2.jpg
filesize:45kb
mais ne l'affiche pas (icone "lien brisé/image inexistante")
Si je fais un "view generated sources" firefox me donne:
Code:
1
2
3
| <div id="prev">
<img src="file:///C:/temp/Image2.jpg" height="100" width="100">
</div> |
Et toujours pas d'image (alors que si je copie ladresse à la main dans la barre d'adresse ça marche nikel)
Je commence donc a tourner en rond, et j'ai plus vraiment les idées claires. Si quelqu'un pourrait m'éclairer un peu s'il vous plait,
merci encore
