upload di immagini

**iacoposk8** · 04-06-2011, 20:35

ciao a tutti! è possibile fare l'upload di immagini in js o serve per forza il php?

**WolfMan94** · 04-06-2011, 21:06

Mh, con php mi trovo meglio io

Comunque ho trovato questa guida - http://script-asp.blogspot.com/2009/11/upload-file-immagini-ajax-asp.html

Anche se ci capisco poco e niente di Ajax, su dei forum hanno consigliato - http://valums.com/ajax-upload/

Spero vadano bene

**mxa** · 05-06-2011, 01:16

Con javascript puoi gestire la parte lato client e fare l'upload via AJAX. Ma ti serve sempre e comunque un linguaggio lato server che gestisca l'upload effettivo, PHP ad esempio.

**carlomarx** · 05-06-2011, 14:03

Con javascript puoi fare l'upload e salvare un'immagine in una variabile, non certamente sul server, ed è anche piuttosto complesso. Se è quello che vuoi, ti posso girare un paio di link...

**cavicchiandrea** · 05-06-2011, 15:00

Originariamente inviato da carlomarx
Con javascript puoi fare l'upload e salvare un'immagine in una variabile, non certamente sul server, ed è anche piuttosto complesso. Se è quello che vuoi, ti posso girare un paio di link...

Posta che potrebbe essere interessante studiarseli

**carlomarx** · 05-06-2011, 16:08

Eccoti accontentato :-) Quest'esempio funziona con firefox. Non so con altri browser (a te risolvere eventuali incompatibilità)... Si tratta comunque di uno standard HTML5 (vedi link in basso). L'ho scritto al volo, per cui perdonate eventuali svarioni. Era più semplice di quel che pensassi :-)

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);
	}
}
</script>
</head>

<body>

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

Un po' di documentazione...

https://developer.mozilla.org/en/DOM/FileReader
https://developer.mozilla.org/En/DOM/Window.btoa
http://www.w3.org/TR/FileAPI/#FileReader-interface

**carlomarx** · 05-06-2011, 16:12

P.S. Ovviamente il codice è valido per qualsiasi file binario, non solo per le immagini. Va da sé che leggere un file di testo è ancora più semplice...

**carlomarx** · 05-06-2011, 16:21

Ah, se vuoi fare la stessa con l'oggetto XMLHttpRequest() invece che con l'oggetto FileReader() le cose si complicano un po' (http://nagoon97.wordpress.com/2008/0...es-using-ajax/)... ma come dico sempre... tutto è possibile con javascript!

**iacoposk8** · 05-06-2011, 19:02

leggerle non faran male... ma mi sa che vado di ajax che già lo conosco

grazie mille a tutti

Discussione: upload di immagini

Strumenti discussione

Ricerca discussione

Visualizza

upload di immagini

Permessi di invio