Newsgroup: it.comp.lang.javascript
Titolo: Altezza, Larghezza e Dimensione di una Immagine

Buongiorno a tutto il NG.
Vi espongo il mio problema sperando che qualcuno mi dia qualche
suggerimento.
Ho un form di Upload in cui ho una semplice text box di tipo file e un
pulsante si submit.
Prima dell'invio vorrei controllare altezza, larghezza e dimenzione
dell'immagine.
Inserisco cosě lo script di Javascript perň ho un'anomalia.
La prima volta che clikko sul pulsante ho larghezza e altezza 0 e
dimensione -1.
La seconda volta invece mi escono correttamente le informazioni.
Lo script che inserisco č il seguente:
function Clikka_onclick() {
var Immagine = new Image();
Immagine.src = formUpload.fileUp.value;
var Larghezza = Immagine.width;
var Altezza = Immagine.height;
var Dimensione = Immagine.fileSize;
alert("dim: " + Larghezza + "x" + Altezza + " size: "+ Dimensione);
}
Aiuti???
Grazie in anticipo.

L'immagine ci metterà un attimo a caricarsi, forse è per questo che ti dà
risultato 0...
prova a togliere la parte inerente alla lettura della proprietà width e
height, e mettile in un'altra function che viene scatenata dall'evento
onload del tag img

 ha scritto nel messaggio
news:blbna7$agc8l$1...@ID-147253.news.uni-berlin.de...

Sarei felicissimo di fare quello che dici tu.
Il problema è che non ho nessun tag img.
L'immagine la seleziono dal pulsante sfoglia che mi
compare quando inserisco la text box di tipo "file".

E te mettila questa immagine...
Oppure assegna la function all'evento onload del tuo oggetto image (se non
sai come fare cerca in google, Zer0 ha postato migliaia di esempi su come
associare ad un evento una function)

 ha scritto nel messaggio
news:blbpfj$a80j3$1...@ID-147253.news.uni-berlin.de...

Scusami Cristiano,
io continuo a riprovare ma cmq non mi funziona la prima volta.
Ho cambiato il codice ma il problema è sempre lo stesso.
Ti invio in seguente codice nella speranza di avere una risposta.
function Clikka_onclick() {
    var myImg = new Image();
    myImg.onload=function(){larghezza=this.width; altezza=this.height;
size=this.fileSize}
    myImg.src="file:///" + formUpload.fileUp.value;
    alert("dim: " + larghezza + "x" + altezza + "    " + size);
}

 }
Mi intrometto.
Il problema e' sempre *quando* vengono eseguite le operazioni.
Associando una funzione ad un evento tu specifichi cosa fara' (futuro) 
il programma quando l'evento verra' (sempre futuro) scatenato.
L'alert alla fine della funzione viene eseguito quando la funzione viene 
chiamata (nel nostro caso: presente).
Come nel tuo codice iniziale alla prima esecuzione l'immagine non e' 
caricata e non sono disponibili le informazioni che richiedi.
P.S. a memoria direi che fileSize e' una proprieta' ie only


Penso anch'io (nel doc w3 di html4.0 non ne fa menzione)


Perfetto, grazie ad entrambi.
Hai ragione, il fileSize funziona solo su IE.
Ho un ultimo problema adesso, spero risolvibile.
Tutti i controlli su larghezza e altezza, a questo punto li faccio sulla
funzione
associata all'evento onload. Nel caso in cui, ad esempio, la larghezza è
maggiore di 100px
inserisco un alert ed un return false.
Ora il return false mi stoppa la funzione associata all'evento ma non quella
principale.
Come faccio a stoppare anche la funzione principale??
Spero di essere stato chiaro.
Grazie sempre infinitamente :-)

 Ho cambiato il codice ma il problema è sempre lo stesso.
Se tu avessi seguito il consiglio di Cristiano, su google avresti 
trovato una tonnellata di post a riguardo che ti risolvevano il problema 
:)
-- 
C'ya,
  ZER0 :: coder.gfxer.webDesigner();
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 P.S. a memoria direi che fileSize e' una proprieta' ie only
Si, cosi' come fileCreatedDate,fileModifiedDate e fileUpdatedDate; ed 
e' associabile alle immagini come al document.


 Grazie sempre infinitamente :-)
E' probabile che tu debba rivedere l'approccio al tuo problema.


Grazie per tutti i consigli che mi avete dato.
Pensavo di poter gestire la cose come i thred che vengono eseguiti in
parallelo.
Ho cercato di sincronizzare le 2 funzioni asincrone.
Visto che, però, c'è da perdere un pò di tempo per me che non sono un
esperto di Javascript
mi inviereste qualche link su sui poter trovare una procedura che faccia al
caso mio??
Ho controllato su jsdir e 
javascript.it
 ma non ho trovato nulla che faccia
al caso miooo.
Grazie

 al caso miooo.
La "procedura che fa al caso tuo" dipende dal "tuo caso", ovviamente.
Ovvero, da com'e' strutturata l'applicazione, il tuo codice. E questo 
noi non lo sappiamo.
Devi semplicemente cambiare approccio al problema perche' la strada che 
vuoi percorrere in Javascript (che ti ripeto, e' "asincrono") non puoi 
farla.


 farla.
Il problema mio č:
ho un form con una text box di tipo file e un pulsante di submit che mi
serve per fare
l'upload di una immagine che scelgo tramite il pulsante browse. Vorrei che
prima di inviare l'immagine si facesse un controllo sulla sua grandezza,
altezza e dimensione.

 altezza e dimensione.
E' molto semplice. Tieni disabilitato il pulsante di submit per default, 
e lo abiliti solo nell'evento onload dell'immagine relativa, SE le 
dimensioni corrispondono.
Per sicurezza (o compatibilita', ma dato che te ne strabatti.. :P ), 
potresti tenere cmq una variabile globale del tipo "imageState" che puoi 
settare con diversi valori relativamente allo stato in cui e' 
l'immagine, e fare un check su di essa nell'evento onsubmit della form.. 
in base ad esso decidi se stoppare l'evento e non submittare 
(restituendo un messaggio relativo).


Ce l'ho fatta..... alla fine sono riuscito a mettere apposto la funzione che
avevo fatto.
Grazie a tutti..... ho imparato un pò di cose su Javascript ;-)

Io ho fatto un qualcosa del genere.... funziona ma dammi un giudizio.
function controllo()
{
if (formUpload.fileUp.value != "")
 {
  stringaIniz = formUpload.fileUp.value;
  var myImg=new Image();
  myImg.onload=function()
  {
  larghezza=this.width;
  altezza=this.height;
  size=this.fileSize;
  if (larghezza > dimensione || altezza > dimensione)
  {
   alert("bla bla bla");
   return(false);
  }
  if (size > 102400)
  {
   alert("bla bla bla");
   return(false);
  }
  formUpload.submit();
  }
  myImg.src=stringaIniz;
  return false
 }
}

 Io ho fatto un qualcosa del genere.... funziona ma dammi un giudizio.
Come ti ho detto, dipende "dal tuo caso".
Ad esempio io non farei mai fare un submit immediato, in quanto spesso 
vi sono altri campi in una form e l'utente puo' decidere di riempire 
prima l'uno, poi l'altro. Ma ti ripeto, dipende dal tuo contesto.
Un ultimo appunto, io considererei quanto meno la possibilita' che 
l'attributo fileSize non esista (mi e' capitato ultimamente di dover far 
porting o rendere cross-browser anche pannelli amministrativi che un 
tempo erano IE-only).
Non afferro il perche' di tutto quei "return false", e aggiungerei anche 
l'eventualita' che il caricamento non vada a buon fine (cosi' come hai 
fatto non lo gestisce), associando l'event handler onerror (nei miei 
vecchi post su questo NG c'era scritto tutto.. ricorda, google e' tuo 
amico :) )


 amico :) )
L'ho appena inserito:
myImage.onerror = myImage.onload
Google sarà sempre mio amico però ogni tanto qualcosina da solo la vorrei
anche fare invece di scopiazzare sempre. Un pò di coding non fa mai male ;-)

 anche fare invece di scopiazzare sempre. Un pò di coding non fa mai male ;-)
La tua logica fa cilecca, allora non dovresti neppure chiedere nell'NG 
;)
Apprezzo chi vuole fare di proprio pugno, perche' e' cosa sana e giusta, 
ma l'inter dovrebbe essere piu' o meno: 
- Mi leggo la reference/user-guide di Javascript per risolvere il 
problema;
- Decido di chiedere sull'NG perche' non cavo un ragno dal buco, ma 
prima di postare domande note e stranote, vedo se esiste un post che 
gia' fa al caso mio (google groups).
- Se tutto questo non porta ad alcun risultato, posto la domanda.
:)


Dopo tutti questi post un grazie definitivo......

 ma l'inter dovrebbe essere piu' o meno: 
LOL :)
Intendevo dire "l'iter".. scusate, come sempre in questo periodo il 
sonno grava pesantemente su di me.
