upload immagine con preview al posto di foto base

**jonathanphp** · 06-06-2011, 22:04

niente da fare non scambia l'immagine... ho provato modificando il codice come mi hai detto:

codice:

<script type="text/javascript">
var sMimeType;

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

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>


e poi nel form in questo modo:


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

**carlomarx** · 07-06-2011, 03:03

Magari la prossima volta prova a scoprire da te perché le cose non funzionano... non lo dico per polemica, ma non serve nemmeno a te farti risolvere i problemi dagli altri!! Anche perché io non conosco il contesto in cui il codice va inserito e quindi invece che aiutarti posso complicarti la vita.

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, 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").src = "data:" + sMimeType + ";base64," + btoa(oFREvent.target.result);
}

oFReader.onload = imageLoaded;

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

<body>

<form name="uploadForm" onsubmit="return(false);">
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto1" type="file" size="33" onchange="loadImageFile();" id="uploadImage" /></td>
  </tr>
</form>
</body>
</html>

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

Ciao! Ti ringrazio funziona a meraviglia!

Ed hai ragione a dirmi di cercare di capire da solo, ma il fatto è che a me piace il php e di java veramente non ci capisco assolutamente nulla...

Ora c'è una cosa che non capisco, siccome io do la possibilità all'utente di caricare fino a 4 immagini (perchè sono ricette quindi do la possibilità di metterne qualcuna in più) ho messo le tue indicazioni anche per le altre foto:

codice:

 <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto1" type="file" size="33" onchange="loadImageFile();"  id="uploadImage" /></td>
  </tr>
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto2" type="file" size="33" onchange="loadImageFile();"  id="uploadImage"/></td>
  </tr>
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto3" type="file" size="33" onchange="loadImageFile();"  id="uploadImage" /></td>
  </tr>
  <tr>
    <td width="38%">[img]../immagini/nophoto.gif[/img]</td>
    <td width="62%"><input name="foto4" type="file" size="33" onchange="loadImageFile();"  id="uploadImage" /></td>
  </tr>

Però funziona solo per la prima, inutile dirti che ho provato a leggere lo script ma non ci capisco niente, quando si tratta di php mi faccio le cose da me chiedo proprio se è indispensabile, ma qui non so dove mettere mano. Scusa se sto abusando della tua pazienza!

**Xinod** · 07-06-2011, 21:12

[discussione linkata in script/discussioni utili]

**carlomarx** · 07-06-2011, 21:12

Non è difficile, ma non ho proprio il tempo per aiutarti adesso... c'è qualcuno nel forum che lo possa fare al posto mio? Thnx

**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

Discussione: upload immagine con preview al posto di foto base

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio