Anteprima dell'immagine prima dell'upload crossbrowser? SI-PUÒ-FARE.

**carlomarx** · 08-05-2012, 22:41

Dopo anni di uso indisturbato di linux, mi sono trovato tra le mani un PC con Windows e ho avuto il tempo di chiedermi: chissà se quel refrain del forum di HTML.it dell'anteprima dell'immagine prima dell'upload non sia possibile renderlo crossbrowser?
La soluzione c'è ed è pure piuttosto semplice. Odio gli script contenenti parti di codice diverse a seconda del browser... ma chi dovesse sentire il bisogno urgente di ottenere l'anteprima di un'immagine prima di un upload sappia che SI PUÒ FARE. Vi giro un codice di esempio.

codice:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
	if (window.FileReader) {
		var	oPreviewImg = null, oFReader = new window.FileReader(),
			rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

		oFReader.onload = function (oFREvent) {
			if (!oPreviewImg) {
				var newPreview = document.getElementById("imagePreview");
				oPreviewImg = new Image();
				oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
				oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
				newPreview.appendChild(oPreviewImg);
			}
			oPreviewImg.src = oFREvent.target.result;
		};

		return function () {
			var aFiles = document.getElementById("imageInput").files;
			if (aFiles.length === 0) { return; }
			if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
			oFReader.readAsDataURL(aFiles[0]);
		}

	}
	if (window.navigator.appName === "Microsoft Internet Explorer") {
		return function () {
			document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
		}
	}
})();
</script>
<style type="text/css">
#imagePreview {
	width: 160px;
	height: 120px;
	float: right;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
</head>

<body>
<div id="imagePreview"></div>

<form name="uploadForm">


<input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" />

<input type="submit" value="Send" /></p>
</form>
</body>
</html>

@Xinod @br1
Mi sembra davvero il caso di infilarla tra le discussioni utili…

**Vincent.Zeno** · 08-05-2012, 23:07

su IE7 e IE8 non mi funziona (ma forse è un problema del mio pc... bho)
invece funge sui due emulatoi IE6

(non posso provare su IE9)

ok su ch, ff, op

no su sf

**carlomarx** · 08-05-2012, 23:47

Io ho usato IE8 e funge. Hai provato ad attivare i controlli ActiveX?
Per quanto riguarda Safari... andrebbe provato online. Certi comportamenti cambiano sui browsers WebKit a seconda che la pagina sia locale o remota.

**Vincent.Zeno** · 09-05-2012, 00:26

si provo in remoto

IE8 mi dice questo:

Messaggio: Impossibile individuare la risorsa specificata.
Linea: 33
Carattere: 4
Codice: 0
URI: http://..../....html

qui:

codice:

			document.getElementById

sai spiegarmelo?

**carlomarx** · 09-05-2012, 01:03

No, non te lo so spiegare. È strano come errore, non riesce a trovare l'elemento: di solito capita quando non è ancora stato letto il DOM, ma lì tu quando selezioni l'immagine l'evento window.onload è già passato da un pezzo. Posso solo garantirti che a me con IE8 funziona (la versione precisa che ho usato è 8.0.6001.18702).

edit: Ho postato l'esempio su MDN:

https://developer.mozilla.org/@api/d...e_preview.html
https://developer.mozilla.org/en/DOM...sDataURL%28%29

**cavicchiandrea** · 09-05-2012, 01:48

Pagina messa online qui
test effettuato con:
- Apple 10.6
-- Firefox Vers. 12 (Funzionante nome e immagine)
-- Chrome Vers. 18 (Funzionante nome e immagine)
-- Safari Vers. 5.1 (Funzionate nome icona [non viene mostra l'immagine ma solo l'icona])
- window 7 professional 64 bit (emulato con parallels desktop 6)
-- IE Vers. 9 (Non funziona con impostazione default, con protezione bassa di sicurezza mostra l'immagine ma non il nome)
-- Firefox Vers. 3.6 (Funziona si vede l'immagine non il nome)
-- Chrome Vers. 18 (Funzionante nome e immagine)

**Vincent.Zeno** · 09-05-2012, 02:05

- window xp professional 32 bit
-- IE Vers. 7/8 (Non funziona con impostazione default, con protezione bassa di sicurezza mostra l'immagine ma non il nome)

**carlomarx** · 09-05-2012, 02:55

Grazie a tutti per i test. Si dovrebbe fare qualche ricerca in più per capire se è possibile renderlo funzionante ovunque. Già questo è cmq un buon risultato.

P.S. Online non funziona neanche a me con IE

**cavicchiandrea** · 09-05-2012, 08:30

Integrazione:
Dal ufficio window 7 interprise IE 8 ricevo:

codice:

Dettagli errore pagina Web
Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E; InfoPath.3)
Timestamp: Wed, 9 May 2012 06:22:20 UTC
Messaggio: Impossibile individuare la risorsa specificata.
Linea: 33
Carattere: 4
Codice: 0
URI: http://webandylab.altervista.org/demo-upload.html

Sul client non dispongo dei poteri amministrativi (completamente bloccato)

Discussione: Anteprima dell'immagine prima dell'upload crossbrowser? SI-PUÒ-FARE.

Strumenti discussione

Ricerca discussione

Visualizza

Anteprima dell'immagine prima dell'upload crossbrowser? SI-PUÒ-FARE.

Permessi di invio