upload immagine con preview al posto di foto base

**cavicchiandrea** · 07-06-2011, 21:14

id devono essere univoci

**jonathanphp** · 07-06-2011, 21:16

quindi devo inserire lo script 4 volte con differenti id?

**carlomarx** · 07-06-2011, 22:39

al volo...

codice:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Esempio</title>
<script type="text/javascript">
var	oFReader = new FileReader(),
	// elimina da quest'elenco i formati che vuoi escludere dall'upload...
	rFiltro = new RegExp("^(" + ["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"].join("|") + ")$", "i");

/**
* In realta' io preferisco questa forma qua, un po' meno immediata ma più performante... ma alla fine e' uguale...
*
*
*	rFiltro = /^(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;
*
**/

function imageLoaded(oFREvent) {
	document.getElementById("uploadPreview" + oFReader.nImageId).src = "data:" + oFReader.sMimeType + ";base64," + btoa(oFREvent.target.result);
}

oFReader.onload = imageLoaded;

function loadImageFile(oFileInput, nPreviewId) {
	if (oFileInput.files.length === 0) { return; }
	var oFile = oFileInput.files[0];
	oFReader.sMimeType = oFile.type;
	if (oFReader.sMimeType.search(rFiltro) === -1) { alert("Devi selezionare un file immagine!"); return; }
	oFReader.nImageId = nPreviewId;
	oFReader.readAsBinaryString(oFile);
}
</script>
</head>

<body>

<form name="uploadForm" onsubmit="return(false);">
<table><tbody>
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto1" type="file" size="33" onchange="loadImageFile(this, 1);" id="uploadImage1" /></td>
  </tr>
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto2" type="file" size="33" onchange="loadImageFile(this, 2);" id="uploadImage2" /></td>
  </tr>
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto3" type="file" size="33" onchange="loadImageFile(this, 3);" id="uploadImage3" /></td>
  </tr>
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto4" type="file" size="33" onchange="loadImageFile(this, 4);" id="uploadImage4" /></td>
  </tr>
</tbody></table>
</form>
</body>
</html>

P.S. Java NON È JavaScript

**jonathanphp** · 07-06-2011, 22:50

grazie funziona alla perfezione, ti devo una birra!!!

**carlomarx** · 07-06-2011, 22:58

Mi basta che ti metti a studiare un po' di javascript... Ti consiglio di usare il Mozilla Developer Center. È in assoluto la fonte migliore per imparare javascript. Ad esempio se vuoi sapere che cos'è l'oggetto FileReader digita su google FileReader mdc - MDC sta per Mozilla Developer Center - se vuoi sapere che cos'è un array e come si usa, scrivi su google array mdc, etc etc

Buona fortuna

**Vindav** · 08-06-2011, 10:06

per quanto ne so fileReader è supportato solo da firefox e da chrome ma non da explorer e safari. Secondo il mio modesto parere queste sono operazioni che andrebbero effettuate lato server e non lato client(magari con una chiamata ajax, sempre se è possibile ma non credo, forse con un iframe). Per IE9 qui trovate le api per la manipolazione di file, mai utilizzate ma dovrebbero permettere di effettuare le stesse operazioni di fileReader ma su IE.

Per curiosità ho provato il codice che è stato postato è funziona solo con firefox, con chrome non vedo errori nella console ma non funziona, forse con un po' di debug si scopre cosa non gli piace. Infine faccio i complimenti a carlo per l'ottimo script che ha condiviso.

**carlomarx** · 08-06-2011, 10:41

Grazie :-)
Come ho già detto si tratta di uno standard. Il fatto che IE si rifiuti di adottarlo (ma mi sembra strano vista la recente conversione di Microsoft agli standard del W3 Consortium) non credo sia un buon motivo per bloccarne la diffusione... anzi!
Certamente, fare la stessa cosa lato server taglierebbe definitivamente la testa al toro (sì ma a che prezzo? quanti file temporanei andrebbero a intasare un server di media consultazione?)

P.S. FUNZIONA ANCHE CON CHROME E SAFARI. I browser basati su motore webkit a volte sono un po' bizzarri... e alcune cose funzionano solo se le pagine si trovano online, mentre non funzionano se le apriamo in locale. Prova a caricare la pagina su un server...

**Vindav** · 08-06-2011, 11:45

eh si hai perfettamente ragione! infatti mi stava venendo il dubbio perche non vedevo errori, l'ho provato su un server ed effettivamente funziona.

Come ho già detto si tratta di uno standard. Il fatto che IE si rifiuti di adottarlo (ma mi sembra strano vista la recente conversione di Microsoft agli standard del W3 Consortium) non credo sia un buon motivo per bloccarne la diffusione... anzi!

Leggendo un po' in rete sembra venga incluso in IE 10. Appurato che solo IE da problemi, forse utilizzando fileapi prototype di IE9 si riesce a rendere questo script cross browser(almeno alle ultime versione dei vari browser). Faro un po di prove. Intanto grazie e

**jonathanphp** · 08-06-2011, 15:34

in effetti su ie non va, ma non ho provato sulla versione 10, ma sulla versione 7, perchè ho abbandonato ie da molto tempo, e uso mozilla adesso, quindi dalla versione 10 funziona? questo cavolo di IE

**carlomarx** · 09-06-2011, 12:56

Originariamente inviato da Vindav
Leggendo un po' in rete sembra venga incluso in IE 10. Appurato che solo IE da problemi, forse utilizzando fileapi prototype di IE9 si riesce a rendere questo script cross browser(almeno alle ultime versione dei vari browser). Faro un po di prove. Intanto grazie e

Facci sapere se riesci a combinare qualcosa!!

**Vindav** · 09-06-2011, 13:31

l'implementazione, che da quanto ho capito è ancora in fase embrionale, non supporta i metodi readAsBinaryString() e readAsArrayBuffer() per l'interfaccia fileReader e purtroppo questo mi complica le cose. L'unico modo è utilizzando un activeXObject quindi si dovrebbe fare un controllo a monte per verificare quale browser stia utilizzando l'utente un po come succede con l'oggetto xmlHttpRequest. Mentre non dovrebbero esserci problemi con file di testo. Oggi purtroppo sono anche su un pc con windows xp e non posso effettuare altre prove senza avere ie9 installato.

Vi tengo aggiornati

**jonathanphp** · 09-06-2011, 13:37

Grazie!!!!

**Vindav** · 10-06-2011, 17:21

niente da fare, sono riuscito a replicare lo script di carlo utilizzando le fileapi prototype, tutto funziona correttamente ma richiede l'installazione di un dll nel pc client per far funzionare l'oggetto ActiveXObject("FileAPI.FileReader") perche non è supportato nativamente.
Tocca aspettare IE10

**carlomarx** · 11-06-2011, 14:34

Manda comunque quello che hai fatto!

**Vindav** · 15-06-2011, 14:18

codice:

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Esempio</title>
<script type="text/javascript">
window.URLDraft = GetFileURL();

function GetFileURL() {
    var fileURL = new ActiveXObject("FileAPI.FileURL");
    if (window.JSON) {
        fileURL.json = window.JSON;
    }
    return fileURL;
}

function loadImageFile() 
{
    var imagePreview = document.getElementById("risultatoHTML");

    var fileSelector = GetFileSelector();
    var iFileList = fileSelector.OpenFileDialog();
    fileSelector.close();

    if (iFileList) {
      imagePreview.innerHTML = "[img]"+window.URLDraft.createObjectURL(iFileList[0])+"[/img]";
    }
}

function GetFileSelector() {
    var fileSelector = new ActiveXObject("FileAPI.FileSelector");
    if (window.JSON) {
        fileSelector.json = window.JSON;
    }
    
    return fileSelector;
}
</script>
</head>

<body>

<form name="miaForm" onsubmit="return(false);">
<table>
<tbody><tr>
<td>Seleziona un'immagine:</td>
<td><input type="file" id="mioFile" onclick="loadImageFile(); return false;" /></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>

Discussione: upload immagine con preview al posto di foto base

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio