Come posso ottenere le dimensioni di caricamento di un file usando Javascript semplice?

Question

Ho la funzionalità di caricamento file su una delle pagine. Controllo l'estensione del file usando JavaScript. Ora voglio impedire all'utente di caricare file di dimensioni superiori a 1 MB. Esiste un modo per verificare la dimensione del caricamento del file utilizzando JavaScript.

Al momento il mio codice è simile al seguente:

<script language="JavaScript">
function validate() {
   var filename = document.getElementById("txtChooseFile").value;
   var ext = getExt(filename);
   if(ext == "txt" || ext == "csv")
      return true;
   alert("Please upload Text files only.");
   return false;
}

function getExt(filename) {
   var dot_pos = filename.lastIndexOf(".");
   if(dot_pos == -1)
      return "";
   return filename.substr(dot_pos+1).toLowerCase();
}
</script>

Answer 1

A parte il fatto che l'acquisizione del nome del file non ti consente di scoprire altri dettagli sul file in javascript, comprese le sue dimensioni.

Invece dovresti configurare lo script lato server per bloccare un caricamento di grandi dimensioni.

Answer 2

Vedi http://www.w3.org/TR/FileAPI/ . È supportato da Firefox 3.6; Non conosco altri browser.

Nell'evento onchange di un <input id="fileInput" type="file" /> semplicemente:

var fi = document.getElementById('fileInput');
alert(fi.files[0].size); // maybe fileSize, I forget

Puoi anche restituire il contenuto del file come una stringa, e così via. Ma, di nuovo, questo potrebbe funzionare solo con Firefox 3.6.

Answer 3

Ora è possibile ottenere le dimensioni del file utilizzando JavaScript puro. Quasi tutti i browser supportano FileReader, che è possibile utilizzare per leggere le dimensioni del file e per mostrare l'immagine senza caricare il file sul server. link

Codice:

    var oFile = document.getElementById("file-input").files[0]; // input box with type file;
    var img = document.getElementById("imgtag");
    var reader = new FileReader();
    reader.onload = function (e) {
            console.log(e.total); // file size 
            img.src =  e.target.result; // putting file in dom without server upload.

   };
   reader.readAsDataURL(oFile );

È possibile ottenere la dimensione del file direttamente dall'oggetto file utilizzando il seguente codice.

 var fileSize = oFile.size;

Answer 4

La maggior parte di queste risposte sono obsolete. Al momento è possibile determinare la dimensione del file sul lato client in qualsiasi browser che supporti l'API File. Ciò include, praticamente, tutti i browser diversi da IE9 e precedenti.

Answer 5

Potrebbe essere possibile usare molto codice specifico del browser. Dai un'occhiata alla fonte di TiddlyWiki , che riesce a salvarsi sul disco rigido dell'utente collegandosi a Windows Scripting Host (IE), XPCOM (Mozilla), ecc.

Answer 6

Non credo che ci sia modo di farlo con JS semplice da una pagina Web.
Forse con un'estensione del browser, ma da una pagina JavaScript non può accedere al filesystem per motivi di sicurezza.

Flash e Java dovrebbero avere restrizioni simili, ma forse sono un po 'meno rigide.

Answer 7

impossibile. sarebbe un grave problema di sicurezza consentire l'esecuzione di script lato client in grado di leggere informazioni sul file e disco rigido degli utenti finali.

Answer 8

Vedi qui:

http: // www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

Quanto a tutte le persone che dicono che questo deve essere fatto sul lato server, sono assolutamente a posto.

Nel mio caso, sebbene la dimensione massima che escluderò sia di 128 Mb, se un utente tenta di caricare qualcosa di 130 Mb non dovrebbe attendere il tempo di caricamento di 5 minuti per scoprire che è troppo grande, quindi devo fare un ulteriore controllo prima di inviare la pagina per motivi di usabilità.