Ottieni le dimensioni dell’immagine utilizzando Javascript durante il caricamento del file

Ho un file UI upload element in cui l’utente caricherà le immagini. Qui devo convalidare l’altezza e la larghezza dell’immagine nel lato client. È ansible trovare la dimensione dell’immagine che ha solo il percorso del file in JS?

Nota: Se No, c’è un altro modo per trovare le dimensioni nel lato Client?

È ansible farlo sui browser che supportano la nuova API File dal W3C, utilizzando la funzione FileReader nell’interfaccia FileReader e assegnando l’URL dei dati FileReader di una img (dopo di che è ansible leggere l’ height e la width dell’immagine). Attualmente Firefox 3.6 supporta l’API File, e penso che Chrome e Safari lo facciano o stiano già facendo.

Quindi la tua logica durante la fase di transizione sarebbe qualcosa del genere:

  1. Rileva se il browser supporta l’API File (che è semplice: if (typeof window.FileReader === 'function') ).

  2. Se lo fa, bene, leggi i dati localmente e inseriscili in un’immagine per trovare le dimensioni.

  3. In caso contrario, caricare il file sul server (probabilmente inviando il modulo da un iframe per evitare di lasciare la pagina), quindi eseguire il polling del server chiedendo quanto è grande l’immagine (o solo per chiedere l’immagine caricata, se si preferisce).

Modifica Ho intenzione di elaborare un esempio dell’API File per un po ‘di tempo; eccone uno:

 < !DOCTYPE HTML>    Show Image Dimensions Locally     

Funziona alla grande su Firefox 3.6. Ho evitato di usare qualsiasi libreria lì, quindi mi scuso per i gestori di eventi in stile attributo (DOM0) e simili.

L’esempio precedente è Ok, ma è tutt’altro che perfetto.

 var reader = new FileReader(); reader.onload = function(e) { var image = new Image(); image.onload = function() { console.log(this.width, this.height); }; image.src = e.target.result; }; reader.readAsDataURL(this.files[0]); 

No, non è ansible, il nome file e il contenuto del file vengono inviati al server nel corpo dell’header http, javascript non può manipolare quei campi.

Se si utilizza un caricamento basato su flash come SWFUpload, è ansible avere tutte le informazioni desiderate e più caricamenti in coda.

Raccomando SWFUpload e non sono in alcun modo associato ad essi se non come utente.

Puoi anche scrivere un controllo Silverlight per scegliere il tuo file e caricarlo.

HTML5 è sicuramente la soluzione corretta qui. Dovresti sempre programmare per il futuro, non per il passato. Il modo migliore per gestire i browser HTML4 consiste nel ripiegare su funzionalità degradate o utilizzare Flash (ma solo se il browser non supporta l’API del file HTML5)

L’utilizzo dell’evento img.onload ti consentirà di recuperare le dimensioni del file. Sta lavorando per un’app a cui sto lavorando.