getAsDataURL et cross-navigateur

[NZaNGa]

Bonjour a tous,

je cherche une solution pour rafraichir une img src a partir d un imput="file"

Sous FF je passe par un getAsDataURL et cela fonctionne sans problème.
Auriez vous une solution de rafraichissement automatique de l image associée a un imput="file" pour les autres navigateurs ?

Merci d avance pour vos lumières.

[mekal]

si il sagit d'une image a la fois il faut faire comme ceci

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function chacharge(){
 
	var fichier = document.getElementById('mon_input').files;
 
 
	var charge=new FileReader();
	charge.readAsDataURL(fichier[0]);
	charge.onloadend = function(e){
 
		document.getElementById('mon_image').src = e.target.result;
 
	}
}

dans l'exemple le input a pour id "mon_input" et la balise img 'mon_image

[NZaNGa]

Merci mekal pour ta reponse,

Je viens de tester sous FF --> OK
sous IE / SAFARI / SE / --> Pas de MAJ du img src ?!

Ai je oublié qq chose ?

Merci d avance

[mekal]

le probleme c'est que ces specifications son recentes et pas ou partielement implementé sur les navigateur

ce que j'ai mis fonctionne completement sur ff opera et chrome faire attention avec chrome car sa ne fonctionne pas en local il faut tester en ligne pour safarie a ma connaissance sa fonctionne partiellement mais il n'affiche pas d'image et enfin pour IE peut etre en 2020

[NZaNGa]

Autrement j ai cette fonction qui fonctionne pour FF IE mais pas pour Safari et les browser mobile (SE, Samsung...)

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" language="javascript"> 
 
document.getElementById('photo').onchange = function() { 
 var filename = document.getElementById('photo').value; 
 var Img = new Image(); 
 
 if (navigator.appName == 'Netscape') { 
  document.getElementById('wMedia').src = document.getElementById('photo').files[0].getAsDataURL();
 } 
 else { 
  Img.src = filename; 
  document.getElementById('wMedia').src = Img.src;  
 } 
} 
</script>

Si tu as des idées je suis preneur...

Merci d avance

[mekal]

sa marche pour ie car ie recuper le chemin de l'image par value ce que ne font pas les autres navigateurs pour une question de securite

avec le support ie sa donne ca

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function chacharge(){
 
	if(document.all) {
var filename = document.getElementById('mon_input').value;
var Img = new Image();
Img.src = filename;
document.getElementById('mon_image').src = Img.src; 
}
else{
	var fichier = document.getElementById('mon_input').files;
 
	var charge=new FileReader();
	charge.readAsDataURL(fichier[0]);
	charge.onload = function(e){
 
		document.getElementById('mon_image').src = e.target.result;
		}
		}
	}

[NZaNGa]

Desolé, mais cela ne fonctionne toujours pas en cross-browser.

quelqu un aurai une idee pour rendre ce code compatible cross-browser ?

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" language="javascript"> 
 
document.getElementById('photo').onchange = function() { 
 var filename = document.getElementById('photo').value; 
 var Img = new Image(); 
 
 if (navigator.appName == 'Netscape') { 
  document.getElementById('wMedia').src = document.getElementById('photo').files[0].getAsDataURL();
 } 
 else { 
  Img.src = filename; 
  document.getElementById('wMedia').src = Img.src;  
 } 
} 
</script>

merci d avance