Problema swap immagine da uploadare

**wildsurf** · 02-03-2005, 12:28

Ciao a tutti, ho uno script per eseguire lo swap di un'immagine, che mi serve all'interno di un form per fare l'upload dell'immagine stessa.
In pratica presento un'immagine fissa e quando ne seleziono una dal pc del visitatore, cambio l'anteprima.
Il problema è che con IE funziona perfettamente, mentre con Firefox no, e non riesco a capire per quale motivo.

Questo è lo script :

codice:

function preview1() 
{
  Img1= new Image(100,50)			  
  Img1.src = "logo-iniziale.gif"      
  Img2 = document.f.foto1.value   
  document.swap1.src = Img2;          
  return true;
}

e questo il form :

codice:

<input type="file" size=50 name="foto1" Onchange="preview1()">

[img]logo-iniziale.gif[/img]

Avete qualche suggerimento ?
Grazie !

**Mich_** · 02-03-2005, 12:49

L'oggetto swap1 non esiste a livello di document.
Fa parte della collezione delle images. Puoi modificare cosi`:
document.images['swap1'].src = Img2;

Se invece usi XHTML, la sintassi e` completamente diversa.

**wildsurf** · 02-03-2005, 13:04

Ciao Michele grazie per il suggerimento, ma con firefox continua a non funzionare.
Ho modificato lo scirpt come hai detto

codice:

document.images['swap1'].src = Img2; 
//  document.swap1.src = Img2;

ma il risultato non mi cambia

Fra l'altro (ma questa è un altra domanda)usando la proprietà che mi hai indicato, volevo testare anche le dimensioni delle immagini che andrò a caricare, usando :

codice:

alert("Le dimensioni attuali sono di " + document.images['swap1'].width + " pixel");

Questo funziona, ma non sempre : a volte la dimensione mostrata nell'alert è corretta, a volte se continuo a scegliere immagini diverse, mi mostra quella della volta prima !
Grazie !

**wildsurf** · 02-03-2005, 13:09

opss. ho schiacciato 2 volte invio

**Mich_** · 02-03-2005, 15:58

Hai un link alla pagina?
Ci sono varie cose che occorre guardare.

1. Hai un doctype nella pagina? Quale?
2. Lasci il tempo di ricaricare l'immagine? Puoi testare con onload sull'oggetto immagine.

**wildsurf** · 02-03-2005, 16:09

Un link immediato no, perchè è all'interno di un form più complesso.
Però posso allegare qui l'estratto in oggetto dalla mia pagina.
Se non ti scoccia potresti fare un copia-incolla come pagina html.
Attenzione che forse nella funzione preview2 c'è un a capo nell'alert che in realtà non esiste.

codice:

<html>
<head>
</head>
<body >
<script language="Javascript">
function preview1() 
{
  Img1= new Image(100,50)			  
  Img1.src = "logo-iniziale.gif"      
  Img2 = document.f.foto1.value   
	document.images['swap1'].src = Img2; 
//  document.swap1.src = Img2;          
  return true;
}
function preview2() 
{
  Img5= new Image(100,50)			  
  Img5.src = "logo-iniziale.gif"     
  Img6 = document.f.foto2.value   
  document.images['swap2'].src = Img6;          
  alert("Le dimensioni attuali sono di " + document.images['swap2'].width +"x" + document.images['swap2'].height + " 

pixel");
  return true;
}
</SCRIPT>
<form name="f" method="post" action="xxxxxxxxxx.asp" enctype="multipart/form-data">
<table align="center" border="0" width="100%">
<tr>
<td bgcolor="#FEF4CD" valign="top">Carica foto 1:</td>
<td bgcolor="#FEF4CD" valign="top"><input class="inputBox" type="file" size=50 name="foto1"  Onchange="preview1()">

[img]logo-iniziale.gif[/img]			
</td>
</tr>	
<span id="prev">
<tr>
<td bgcolor="#FEF4CD" valign="top">Carica foto 2:</td>
<td bgcolor="#FEF4CD" valign="top"><input class="inputBox" type="file" size=50 name="foto2" Onchange="preview2()">

[img]logo-iniziale.gif[/img]			
</td>
</tr>	
</span>
<tr>
<td colspan="2" align="center">
<input class="inputSubmit" type="submit" name= "Go" value="Invia">
</td>
</tr>
</table>		
</form>
</body>
</html>

Grazie in anticipo per tutto e scusa il disturbo.
Ciao !

**Mich_** · 02-03-2005, 16:44

A questo punto e` chiaro: non dai tempo di caricare l'immagine.

Prova cosi`:
<input class="inputBox" type="file" size=50 name="foto1" onchange="preview(this, 'swap1');">
...
<input class="inputBox" type="file" size=50 name="foto2" onchange="preview(this, 'swap2');">

codice:

var Imm = new Image();

function preview(cc,dest) {
  //Imm.src = "logo-iniziale.gif"; // a che serve??
  var str = cc.value;
  Imm.src = str;
  Imm.onload = preview_2;  // senza parentesi!!
  document.getElementById(dest).src = str;
  return;
}

function preview_2() {
  var w = Imm.width;
  var h = Imm.height;
  alert("Le dimensioni attuali sono di " + w +" x " + h + "pixel");
  return true;
}

Servono due funzioni perche` in una fai partire il caricamento, nell'altra leggi le dimensioni.

Invece puoi chiamare la stessa funzine con parametri diversi per i due input.

Ho modificato un pelo i nomi, per evitare nomi simili per oggetti strutturalmente diversi (per chiarezza di noi umani).

**wildsurf** · 02-03-2005, 17:09

Michele ho provato lo script con le tue modifiche.
Con IE funziona perfettamente, ma con Firefox no.
Andando nella console javascript di Firefox, vedo che quando seleziono un file, ottengo il seguente errore :

Errore: document.getElementById(dest) has no properties

**Mich_** · 02-03-2005, 17:16

Ha ragione. E` IE che non segnala l'errore (per lui tutto fa brodo: confonde id e name)

Il getElementById() ha bisogno di passargli un id valido.

Se non hai nomi doppi nella pagina, metti:
[img]logo-iniziale.gif[/img]
(idem per l'altra)

**wildsurf** · 02-03-2005, 17:38

Macchè, mi sa che devo rinunciare.
Adesso Firefox non da più l'errore, ma lo swap non avviene.
Continuo a vedere l'immagini iniziale e non quella selezionata per l'upload !

Discussione: Problema swap immagine da uploadare

Strumenti discussione

Ricerca discussione

Visualizza

Problema swap immagine da uploadare

Permessi di invio