L'image chargée ne s'affiche pas

**ddiop** · 14/04/2015, 16h22

Bonjour à toutes et à tous
je voudrais charger une image et l 'afficher mais j arrive pas à afficher l' image .

Voici le code HTML:

Code html :

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

1
2
3
4
<input type="file" id="getimage">
<fieldset><legend>Votre image ici</legend>
    <div  id="imgstore"></div>
</fieldset>

le code js

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
function imageHandler(e2) { 
  var store = document.getElementById('imgstore');
  store.innerHTML='<img src="' + e2.target.result +'">';
}
function loadimage(e1){
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}
window.onload=function(){
  var x = document.getElementById("filebrowsed");
  x.addEventListener('change', readfile, false);
  var y = document.getElementById("getimage");
  y.addEventListener('change', loadimage, false);
}

Merci d'avance de votre aide

**gustave02** · 15/04/2015, 09h54

voila un exemple qui fonctionne

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
 
<!DOCTYPE html>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
	<script type="text/javascript">	
		window.onload=function(){                                       // la fonction qui créer l’écouteur on aurait pu mette dans la balise html <input type="file" onchange="selection()">
  			var x = document.getElementById("image");
 			x.addEventListener('change', selection,false);
		}
		function selection (event){
			var contener = document.getElementById('imagechoisi');	
			var files = event.target.files;
			var f = files[0]; // on prend que le premier fichier car l'utilisateur peut en sélectionner plusieurs dans ce cas prévoir boucle
			var reader = new FileReader();
			 reader.onloadend = function () { contener.src = reader.result;}
			reader.readAsDataURL(f);			
		}
 
	</script>	
 
<body>
	<input type="file" id="image">
	<fieldset><legend>Votre image ici</legend>
   	 <div  id="imgstore"  ><img src=""  id="imagechoisi" height="200" ></div>
	</fieldset>
 
</body>
</html>

j'espere que ca va t'aider.
@+gustave02

**ddiop** · 15/04/2015, 13h57

merci de ton aide ça m'a beaucoup aide

L'image chargée ne s'affiche pas

JavaScript

Discussions similaires

Partager

Partager