Newsgroup: it.comp.lang.javascript
Titolo: upload immagini con preview

Salve, ho il seguente script per visualizzare un preview di tre immagini 
di cui voglio fare l’upload e funziona…
<!--
html>
<head><title> Area Riservata</title>
<script language="Javascript">
// Questo script visualizza un'anteprima delle immagini selezionate per 
l'upload
function preview(x)
{
switch (x) {
case 1:
img1x= new Image(152,82)
img1x.src = "immagini/Esempio.jpg"
img2x = document.form_immagini1.img1.value
document.swap1.src = img2x;
return true;
case 2:
img1= new Image(152,82)
img1.src = "immagini/Esempio.jpg"
img2 = document.form_immagini2.upfile2.value
document.swap2.src = img2;
return true;
case 3:
img1= new Image(152,82)
img1.src = "immagini/Esempio.jpg"
img2 = document.form_immagini3.upfile3.value
document.swap3.src = img2;
return true;
}
}
</script>
<script language="JavaScript">
// Questo script scrive una frase sulla status bar del browser
var scritta = "UPLOAD in corso...";
function scritta_status_bar()
{
window.status=scritta;
}
</script>
</head>
<body>
<h2>area riservata</h2>
<br>
<br>
Form per l'upload delle immagini
<br>
<br>
<FORM ACTION="do_upload_.php" METHOD="post" NAME="form_immagini1" 
enctype=multipart/form-data>
<IMG NAME="swap1" SRC="immagini/Esempio.jpg" BORDER="0" VSPACE="20" 
width="152" height="82"><br>
<input type="file" name="img1" class="txt" size="14" 
Onchange="preview(1)"><br><br>
<INPUT TYPE="submit" name="submit" VALUE="Invia il file" 
onClick="scritta_status_bar()">
</FORM>
<br>
<FORM ACTION="upload2.asp" METHOD="post" NAME="form_immagini2" >
<IMG NAME="swap2" SRC="immagini/italia.png" BORDER="0" VSPACE="20" 
width="152" height="82"><br>
<input type="file" name="upfile2" class="txt" size="14" 
Onchange="preview(2)"><br><br>
<INPUT TYPE="button" VALUE="Invia il file" OnClick="java script: 
alert('Questa è solo una prova'); return true;">
</FORM>
<br>
<FORM ACTION="upload3.asp" METHOD="post" NAME="form_immagini3" >
<IMG NAME="swap3" SRC="immagini/italia.png" BORDER="0" VSPACE="20" 
width="152" height="82"><br>
<input type="file" name="upfile3" class="txt" size="14" 
Onchange="preview(3)"><br><br>
<INPUT TYPE="button" VALUE="Invia il file" OnClick="java script: 
alert('Questa è solo una prova'); return true;">
</FORM>
<br>
<br>
</body>
</html>
-->
Ora vorrei fare un’ulteriore modifica facendo in modo che tutte e tre le 
immagini vengano caricate contemporaneamente, cioè con un solo tag 
<form> e quindi un unico bottone “invia file”.
Ho provato così, ma il preview delle immagini selezionate non funziona più:
<!--
<html>
<head><title> Area Riservata</title>
<script language="Javascript">
// Questo script visualizza un'anteprima delle immagini selezionate per 
l'upload
function preview()
{
img1x= new Image(152,82)
img1x.src = "immagini/Esempio.jpg"
img2x = document.form_immagini.img1.value
document.swap1.src = img2x;
return true;
img1= new Image(152,82)
img1.src = "immagini/Esempio.jpg"
img2 = document.form_immagini.img2.value
document.swap2.src = img2;
img1= new Image(152,82)
img1.src = "immagini/Esempio.jpg"
img2 = document.form_immagini.img3.value
document.swap3.src = img2;
return true;
}
</script>
<script language="JavaScript">
var scritta = "UPLOAD in corso...";
function scritta_status_bar()
{
window.status=scritta;
}
</script>
</head>
<body>
<h2>area riservata</h2>
<br>
<br>
Form per l'upload delle immagini
<br>
<br>
<FORM ACTION="do_upload.php" METHOD="post" NAME="form_immagini" 
enctype=multipart/form-data>
<IMG NAME="swap1" SRC="immagini/Esempio.jpg" BORDER="0" VSPACE="20" 
width="152" height="82"><br>
<input type="file" name="img1" class="txt" size="14" 
Onchange="preview()"><br><br>
<br>
<IMG NAME="swap2" SRC="immagini/italia.png" BORDER="0" VSPACE="20" 
width="152" height="82"><br>
<input type="file" name="img2" class="txt" size="14" 
Onchange="preview()"><br><br>
<br>
<IMG NAME="swap3" SRC="immagini/italia.png" BORDER="0" VSPACE="20" 
width="152" height="82"><br>
<input type="file" name="img3" class="txt" size="14" 
Onchange="preview()"><br><br>
<INPUT TYPE="submit" name="submit" VALUE="Invia il file" 
onClick="scritta_status_bar()">
</FORM>
<br>
<br>
</body>
</html>
-->
C'è qualcuno che sa darmi qualche dritta su come fare ?
Grazie 1000 in anticipo, Ciao !

 C'è qualcuno che sa darmi qualche dritta su come fare ?
Guarda e' talmente tutto un casino che faccio prima a ripostarti qualcosa di
un po' piu' razionale e corretto, magari inserisco qualche commento qua e
la' per essere piu' chiaro e non vanificare le mie fatiche :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<!-- gia' che c'ero ho reso la pagina xhtml1.0 -->
<head>
<title>Preview Img</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
/*
La seguente funzione converte la stringa ricevuta dal campo file in una
stringa "valida web file" cioe' compatibile con tutti i browser e non solo
con IE...
*/
function convertireUrl(str)
{
 return 'file:///'+str.replace(/\\/g,'/');
}
/*
la seguente funzione mostra un'immagine in base al parametro ricevuto
(questo parametro nel esempio ispirato dal tuo e' un numero...).
quindi ad es: una chiamata a preview(5): cercherebbe di cambiare l'immagine
con il nome "swap5" corrispondente all'url (reso web compatibile) del campo
file con nome "img5"
*/
function preview(n)
{
 document.images['swap'+n].src=
 convertireUrl(document.forms["form_immagini"].elements['img'+n].value);
}
//-->
</script>
</head>
<body>
<form action="do_upload.php" method="post" enctype="multipart/form-data"
id="form_immagini" name="form_immagini">
<!--
se usi php, credo che ci vogliano dei campi nascosti con dichiarate le
dimensioni dei file da uploadare...
Comunque questo non e' di "competenza" di questo NG :)
-->
  <p><img id="swap1" name="swap1" src="immagini/Esempio.jpg" vspace="20"
border="0" alt="" /></p>
<!--
Ho tolto la dimensione dell'immagine, cosi' qualunque immagine inserisci
verra' visualizzata correttamente...
-->
  <p>
    <input type="file" id="img1" name="img1" />
<!--
Ho tolto l'evento onchange del campo file perche' mi sembra che non andasse
con tutti i browser e per sicurezza ho inserito un bottone che scateni
l'evento per fare il preview...
-->
    &nbsp;&nbsp;
    <input type="button" value="preView" onclick="preview(1)" />
  </p>
</form>
</body>
</html>