Discussion :

[fazpedro]

Bonjour,
j'ai un souci sur mon code jquery :
je souhaite prévisualiser une image à l'écran avant d'effectuer l'upload mais certaines images passent bien et pas d'autres (pourtant elles semblent identiques..en JPEG..., et je ne vois pas ce qui coince dans mon code...
Merci.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
38
39
40
41
42
 
<style>
#supp_image {visibility:hidden;}
#titre_image {visibility:hidden;}
</style>
 
<script type="text/javascript"><!-- DEBUT script pour previsualiser l'image -->
 function show_image()
{	var mypath = document.getElementById('id_image').value;
	var html = '<img src="'+mypath+'" widht="120px" height="80px" />';
	document.getElementById('mon_image').innerHTML = html;
	document.getElementById('supp_image').style.visibility = 'visible';
	document.getElementById('titre_image').style.visibility = 'visible';
	return true;
}
</script><!-- FIN script pour previsualiser l'image -->
 
<script type="text/javascript"><!-- DEBUT script pour suppression de l'image -->
 function suppr_image()
{	
	document.getElementById('mon_image').innerHTML = '';
	document.getElementById('id_image').value = '';
	document.getElementById('supp_image').style.visibility = 'hidden';
	document.getElementById('titre_image').style.visibility = 'hidden';
	return true;
}
</script><!-- FIN script pour suppression de l'image -->
 
<tr>
<td align="right">Image : </td>
<td><input type="file" tabindex="12" name="image" id="id_image" onchange="show_image();" /></td>
</tr>
 
<tr id="titre_image">
<td align="right">Apercu : </td>
<td id="mon_image"></td>
</tr>
 
<tr id="supp_image">
<td align="right"></td>
<td><a class="bouton" tabindex="13" value="Supprimer l'image ?" onclick="suppr_image();">Suprimer l'image ? </a></td>
</tr>

[Bovino]

JavaScript n'a pas accès (pour des raisons de sécurité) au chemin du fichier. Donc si le fichier sélectionné est dans le même répertoire que la page, ça marchera, sinon, impossible d'y remédier.

[fazpedro]

En fait je voudrais un upload comme la page ci-dessous (rubrique "New Hotness")
http://www.zurb.com/playground/ajax_upload

mais j'ai pas réussi à effectuer la même chose !.. et tout est en anglais...
Merci.

[le_chomeur]

Il faut effectivement se tourner ver l'html 5 et l'api FileReader qui te permet une fois le fichier chargé d'avoir accès a plus de propriétés qu'en html simple ( poid , l'image en elle même etc .... )

par contre pas compatible IE9 /!\ ( ni 7 et 8 ^^ )

exemple : http://html5demos.com/file-api

[fazpedro]

Bonjour,
je viens d'essayer la page :
http://www.zurb.com/playground/ajax_upload
sur Internet Explorer 9 et elle fonctionne bien...

mais je ne comprend toujours pas comment l'utiliser pour mon site...
Merci.

[le_chomeur]

l'image est uploadé puis renvoyée
sur leur démo tu peux voir tout le processus en analysant l'activité réseaux.