Ottieni le dimensioni del file prima del caricamento

C’è un modo per scoprire la dimensione del file prima di caricare il file utilizzando AJAX / PHP in caso di modifica del file di input?

Per il muggito HTML

 

prova quanto segue:

 //binds to onchange event of your input field $('#myFile').bind('change', function() { //this.files[0].size gets the size of your file. alert(this.files[0].size); }); 

Vedi la seguente discussione:

Come verificare le dimensioni di input dei file con jQuery?

   

Lavora su IE e FF

Ecco un semplice esempio di come ottenere le dimensioni di un file prima del caricamento. Sta usando jQuery per rilevare ogni volta che i contenuti vengono aggiunti o modificati, ma puoi ancora ottenere files[0].size senza usare jQuery.

 $(document).ready(function() { $('#openFile').on('change', function(evt) { console.log(this.files[0].size); }); }); 
  

Ho avuto lo stesso problema e sembra che non abbiamo avuto una soluzione accurata. Spero che questo possa aiutare le altre persone.

Dopo aver dedicato del tempo ad esplorare, ho finalmente trovato la risposta. Questo è il mio codice per ottenere il collegamento con jQuery:

 var attach_id = "id_of_attachment_file"; var size = $('#'+attach_id)[0].files[0].size; alert(size); 

Questo è solo il codice di esempio per ottenere le dimensioni del file. Se vuoi fare altre cose, sentiti libero di cambiare il codice per soddisfare le tue esigenze.

La migliore soluzione funzionante su tutti i browser;)

 function GetFileSize(fileid) { try { var fileSize = 0; //for IE if(checkIE()) {//we could use this $.browser.msie but since it's depracted we'll use this function //before making an object of ActiveXObject, //please make sure ActiveX is enabled in your IE browser var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $("#" + fileid)[0].value; var objFile = objFSO.getFile(filePath); var fileSize = objFile.size; //size in kb fileSize = fileSize / 1048576; //size in mb } //for FF, Safari, Opeara and Others else { fileSize = $("#" + fileid)[0].files[0].size //size in kb fileSize = fileSize / 1048576; //size in mb } alert("Uploaded File Size is" + fileSize + "MB"); } catch (e) { alert("Error is :" + e); } } 

da http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

AGGIORNAMENTO: useremo questa funzione per verificare se si tratta di browser IE o meno

 function checkIE() { var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){ // If Internet Explorer, return version number alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)))); } else { // If another browser, return 0 alert('otherbrowser'); } return false; } 

I browser con supporto HTML5 hanno proprietà file per tipo di input. Questo ovviamente non funzionerà con versioni precedenti di IE.

 var inpFiles = document.getElementById('#fileID'); for (var i = 0; i < inpFiles.files.length; ++i) { var size = inpFiles.files.item(i).size; alert("File Size : " + size); } 

è necessario eseguire una richiesta HEAD ajax per ottenere il file. con jquery è qualcosa del genere

  var req = $.ajax({ type: "HEAD", url: yoururl, success: function () { alert("Size is " + request.getResponseHeader("Content-Length")); } }); 

La soluzione di ucefkh ha funzionato meglio, ma poiché $. browser era deprecato in jQuery 1.91, dovette cambiare per usare navigator.userAgent:

 function IsFileSizeOk(fileid) { try { var fileSize = 0; //for IE if (navigator.userAgent.match(/msie/i)) { //before making an object of ActiveXObject, //please make sure ActiveX is enabled in your IE browser var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $("#" + fileid)[0].value; var objFile = objFSO.getFile(filePath); var fileSize = objFile.size; //size in kb fileSize = fileSize / 1048576; //size in mb } //for FF, Safari, Opeara and Others else { fileSize = $("#" + fileid)[0].files[0].size //size in kb fileSize = fileSize / 1048576; //size in mb } return (fileSize < 2.0); } catch (e) { alert("Error is :" + e); } } 
 $(document).ready(function() { $('#openFile').on('change', function(evt) { console.log(this.files[0].size); }); }); 
  

Puoi usare la funzione PHP filesize. Durante il caricamento usando ajax, controlla prima la dimensione del file effettuando una richiesta ajax request allo script php che controlla il file e restituisce il valore.

Puoi utilizzare l’API file HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Tuttavia dovresti sempre avere un fallback per PHP (o qualsiasi altra lingua di backend che usi) per i browser più vecchi.

Personalmente, direi che la risposta di World World è la migliore oggi, dati gli standard HTML. Se è necessario supportare IE <10, sarà necessario utilizzare una qualche forma di ActiveX. Eviterei le raccomandazioni che implicano la codifica di Scripting.FileSystemObject, o l'istanziazione diretta di ActiveX.

In questo caso, ho avuto successo usando librerie JS di terze parti come il plupload che può essere configurato per utilizzare i apis HTML5 oi controlli Flash / Silverlight per i browser di backfill che non supportano quelli. Plupload ha un’API lato client per il controllo della dimensione del file che funziona in IE <10.

Si prega di non utilizzare ActiveX poiché è probabile che visualizzi un messaggio di avviso spaventoso in Internet Explorer e scoraggi gli utenti.

Avviso ActiveX

Se qualcuno vuole implementare questo controllo, dovrebbe fare affidamento solo sull’object FileList disponibile nei browser moderni e fare affidamento sui controlli lato server solo per i browser più vecchi ( miglioramento progressivo ).

 function getFileSize(fileInputElement){ if (!fileInputElement.value || typeof fileInputElement.files === 'undefined' || typeof fileInputElement.files[0] === 'undefined' || typeof fileInputElement.files[0].size !== 'number' ) { // File size is undefined. return undefined; } return fileInputElement.files[0].size; }