getAsDataURL et cross-navigateur

Version imprimable

19/06/2011, 13h32
NZaNGa

getAsDataURL et cross-navigateur

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.

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

19/06/2011, 16h14
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
19/06/2011, 16h52
Invité

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 :aie:

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

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;
		}
		}
	}

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