Afficher une image suite à <input type="file"> sur la même page.

Version imprimable

22/08/2006, 09h49
elamidon

Afficher une image suite à <input type="file"> sur la même page.

Bonjour à tous !

Je fait appel à vous pour un petit problème de développement en JSP, via Eclipse et TomCat ..

Voilà .. je suis capable d'uploader une image sur le serveur, jusque là .. aucun probleme !
Or, ce que le client me demande, est de pouvoir "prévisualiser" les images avant de les uploader. Le projet, de la forme d'une bande dessinée, est composé de plusieurs images :

-chaque image possède un bouton et un champ "parcourir"
-chaque image possède un bouton "Afficher l'image"
-un bouton général permet d'uploader toutes les images choisies.

Je sais que la balise <input type="file"> ne permet pas d'être attaquée par un tout bête

Code:

request.getParameter("inputfile");

..

Afin d'afficher la prévisulisation, je pensais passer par une bout de code qui s'il voit un certain parametre non null, il affiche une balise

Code:

<img src=file://\""+variable+"\">"

.

Là où je bloque, c'est de pouvoir récupérer le "chemin" absolu ou relatif (ou URI) de l'objet image envoyé par la balise <input type="file"> afin de pouvoir afficher l'image SANS déplacer cette dernière ...

Si quelq'un à une idée ...

Merci d'avance !!

Sylvain
22/08/2006, 13h24
fabszn

Hello,

Je pense que tu pourrais réaliser cela en traitant ce problème coté client.

Au moyen du javascript..
22/08/2006, 14h26
elamidon
Salut à toi !

Merci pour ta réponse,

j'ai trouvé un ptit bout de code qui pourrais ptete m'aider ! mais comme je suis une grosse quiche en JS, je vais devoir plancher a fond o_O !

en tout cas voici le code que j'ai trouvé :
Code:

1 2 3 4 5 6 7 8 <script language="javascript"> function getFileName(monNomDeParam){ document.all[monNomDeParam].value } </script>
Mais bon honnetement je sais pas encore trop comment m'y prendre ..

*se téléporte du côté forum javaScript * ...
22/08/2006, 14h35
fabszn

Hello,

Je pense que le fonctionnalité ne devrait pas être trop dure à mettre en oeuvre..:D

Regarde du coté des balises div en HTML et le moyen dit accèder en javascript ...

Bon courage!:D

N'oublie pas le tag résolu ;)

ahAH !

J'ai trouvé un script tout chaud tout beau sur le net, grâce à ton orientation !
:aie:

voilà ce que ça donne pour moi (en plus ça la redimmensionne, et contrôle même la taille !!!!)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/javascript">
 
var oImg = new Image();
function verifPoids_redimentionimage(photo) {
document.images["avatar"].src = 'file:///'+photo.value;
oImg.src=document.images["avatar"].src;
var imageX = oImg.width;
var imageY = oImg.height;
 
alert(imageX+':'+imageY);
 
imageX=200;
 
imageY=200;
 
document.images["avatar"].width = imageX;
document.images["avatar"].height = imageY;
 
 
 
var poidsImage = elemImage.fileSize;
if (poidsImage > 300*1024) { // test si poids > 300  Ko
// message d'alerte avec poids converti en Ko
alert("Fichier trop gros ! ("+ Math.floor(poidsImage/1024) +" Ko)");
document.images["avatar"].width = 300;
document.images["avatar"].height= 300;
// remplacement par l'image d'origine
elemImage.src= "nophoto.jpg";
}
}
</script>
</head>
<body>
<img src="images/f_acc1.jpg" name="avatar" id="avatar" style="border:1px solid black;">
<form method="post" name="formulairecompte" enctype="multipart/form-data" action="testupload.html">
<input name="fichier" type="file" onchange="verifPoids_redimentionimage(this)">
</form>

Youpi youpi ! je vais pouvoir avancer !!

Merci encore !

Cordialement

Sylvain