upload immagine con preview al posto di foto base

**jonathanphp** · 06-06-2011, 01:55

Ciao ragazzi... ho già cercato nel forum ma non sono riuscito a trovare una risposta, ed ho cercato anche nel web, ma quegli script non funzionano

Ho un'immagine standard che si chiama nophoto, e un form input type=file per caricare una foto, sto cercando uno script molto semplice che, nel momento in cui io seleziono la foto da uploadare, cambia subito l'immagine nophoto con il preview di quella da caricare sul server che ho appena selezionato, questo proma di premere il pulsante invia, così per una questione estetica mi piacerebbe, è possibile farlo? qualcuno ha qualche script funzionante per questo? Grazie ragazzi mi aiutereste a rendere il mio sito più carino. un abbraccio!

**carlomarx** · 06-06-2011, 02:04

ma che è, all'improvviso è diventata una mania??

http://forum.html.it/forum/showthrea...6#post13346215

**jonathanphp** · 06-06-2011, 02:12

questo non è quello che ho descritto...

**carlomarx** · 06-06-2011, 02:21

hai provato ad aprire il codice html che ho postato??

**jonathanphp** · 06-06-2011, 02:28

si si, e bisogna cliccare su un link per visualizzare l'anteprima della foto, mentre io voglio uno swap tra la foto già esistente (quella che ho chiamata nophoto) e la nuova foto selezionata con l'input, ovviamente in tempo reale senza dover cliccare nessun link, non so se sono riuscito a spiegarmi in modo chiaro

**carlomarx** · 06-06-2011, 02:35

o madonna... era tutto qui il problema?!

codice:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Esempio</title>
<script type="text/javascript">
var sMimeType;

function fileLoaded(frEvnt) {
	var sFBody = frEvnt.target.result;
	var sBodyBase64 = btoa(sFBody);
	var sHTMLCode = "<img src=\"data:" + sMimeType + ";base64," + sBodyBase64 + "\" \/>";
	document.miaForm.uscitaBin.value = sFBody;
	document.miaForm.uscitaB64.value = sBodyBase64;
	document.miaForm.uscitaHTML.value = sHTMLCode;
	document.getElementById("risultatoHTML").innerHTML = sHTMLCode;
}

function loadImageFile() {
	var oFile = document.getElementById("mioFile").files[0];
	if (oFile) {
		var oFReader = new FileReader();
		oFReader.onload = fileLoaded;
		sMimeType = oFile.type;
		oFReader.readAsBinaryString(oFile);
	}
}

function ciao() {
alert("oij");
}
</script>
</head>

<body>

<form name="miaForm" onsubmit="return(false);">
<table>
<tbody><tr>
<td>Seleziona un'immagine:</td>
<td><input type="file" id="mioFile" onchange="loadImageFile();" /></td>
</tr><tr>
<td>Output binario:</td>
<td><textarea name="uscitaBin" style="width: 400px; height: 100px;"></textarea></td>
</tr><tr>
<td>Output base64:</td>
<td><textarea name="uscitaB64" style="width: 400px; height: 100px;"></textarea></td>
</tr><tr>
<td>Output HTML:</td>
<td><textarea name="uscitaHTML" style="width: 400px; height: 100px;"></textarea></td>
</tr><tr>
<td>Risultato HTML:</td>
<td><div id="risultatoHTML"></div></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

**jonathanphp** · 06-06-2011, 02:46

ohhhhh si grazie! scusami ma per me javascript è una lingua a parte...

ora io vorrei adattarlo al mio codice... che è tipo così:

codice:

<tr>
     <td width="38%">[img]../immagini/nophoto.gif[/img]</td>     
     <td width="62%"><input name="foto1" type="file" size="33" /></td>
</tr>

come sostituisco la mia foto?
Grazie e non lanciarmi le pietre per piacere!

**cavicchiandrea** · 06-06-2011, 09:09

@carlomarx
Se non ho capito male e html5 (non letto tutto quello che hai postato per mancanza di tempo) pertanto ritengo che la retro compatibilita praticamente sia nessuna, inoltre su che browser è stata testa? A tal proposito potrebbe essere utile mettere una pagina online.
Sempre se ne hai voglia, altrimenti come non detto.

**carlomarx** · 06-06-2011, 10:35

Sì, esatto... è uno standard HTML5 (http://www.w3.org/TR/FileAPI/#FileReader-interface) e la retrocompatibilità è praticamente nessuna! Ma è sempre più raro che i computer in circolazione non siano aggiornati alle versioni più recenti dei browser (IE e Mozilla si aggiornano in automatico su Win, Mozilla e Chromium idem su Ubuntu, etc.).
Il codice che ho postato è stato testato con Firefox. Ho controllato la compatibilità delle funzioni contenute nel mio codice e, prese singolarmente, sono compatibili con tutti i browser più recenti... ma non so se assemblarle insieme abbia creato qualcosa di compatibile solo con Firefox!
Sulla pagina online... non è la voglia il problema... ma il tempo!!

Ciao

**carlomarx** · 06-06-2011, 10:46

Originariamente inviato da jonathanphp
ora io vorrei adattarlo al mio codice... che è tipo così:

codice:

<tr>
     <td width="38%">[img]../immagini/nophoto.gif[/img]</td>     
     <td width="62%"><input name="foto1" type="file" size="33" /></td>
</tr>

Non posso fare altro che indicarti la strada da seguire... Assegna un ID alla tua immagine:

codice:

[img]../immagini/nophoto.gif[/img]

Quindi riduci la funzione fileLoaded a questa semplice riga:

codice:

function fileLoaded(frEvnt) {
	document.getElementById("tuaImmagine").src = "data:" + sMimeType + ";base64," + btoa(frEvnt.target.result);
}

A questo punto fossi in te metterei un filtro alla funzione loadImageFile per far sì che l'anteprima parta solo nel caso in cui il mime type del file selezionato sia quello di un'immagine.

Ciao

Discussione: upload immagine con preview al posto di foto base

Strumenti discussione

Ricerca discussione

Visualizza

upload immagine con preview al posto di foto base

Permessi di invio