Ottieni la dimensione 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

<input type="file" id="myFile" />

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);

});

Vedere la seguente discussione:

Come controllare la dimensione dell'input del file con jQuery?

<script type="text/javascript">
function AlertFilesize(){
    if(window.ActiveXObject){
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    }else{
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    }

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

Lavora su IE e FF

Ecco un semplice esempio per ottenere la dimensione di un file prima del caricamento. Utilizza jQuery per rilevare ogni volta che i contenuti vengono aggiunti o modificati, ma puoi comunque ottenere files[0].sizesenza utilizzare jQuery.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

Ecco un esempio più completo, un codice di prova per trascinare i file in FormData e caricarli tramite POST su un server. Include un semplice controllo della dimensione del file.

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

Dopo aver impiegato del tempo ad esplorare, ho finalmente trovato la risposta. Questo è il mio codice per allegare file 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 la dimensione del file. Se vuoi fare altre cose, sentiti libero di cambiare il codice per soddisfare le tue esigenze.

La migliore soluzione funziona 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 deprecated, 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 b
            fileSize = fileSize / 1048576; //size in mb 
        }
        // for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            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 è il 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 il tipo di input. Questo ovviamente non funzionerà nelle 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);
}

La soluzione di ucefkh ha funzionato meglio, ma poiché $ .browser era deprecato in jQuery 1.91, è stato necessario modificare per utilizzare 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 b
            fileSize = fileSize / 1048576; //size in mb 
        }
        //for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        return (fileSize < 2.0);
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

devi fare una richiesta ajax HEAD per ottenere la dimensione del file. con jquery è qualcosa del genere

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

Si prega di non utilizzare in ActiveXquanto è probabile che visualizzi un messaggio di avviso spaventoso in Internet Explorer e spaventi i tuoi utenti.

Se qualcuno vuole implementare questo controllo, dovrebbe fare affidamento solo sull'oggetto FileList disponibile nei browser moderni e fare affidamento sui controlli lato server solo per i browser meno recenti ( 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;
}

È possibile utilizzare la funzione di dimensione file PHP. Durante il caricamento usando ajax, controlla prima la dimensione del file facendo una richiesta una richiesta ajax allo script php che controlla la dimensione del file e restituisce il valore.

È possibile utilizzando HTML5 File API: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Tuttavia dovresti sempre avere un fallback per PHP (o qualsiasi altro linguaggio di backend che usi) per i browser meno recenti.

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

In questo caso, ho avuto successo utilizzando librerie JS di terze parti come plupload che possono essere configurate per utilizzare API HTML5 o controlli Flash / Silverlight per eseguire il backfill dei browser che non li supportano. Plupload ha un'API lato client per il controllo della dimensione del file che funziona in IE <10.