Obtener el tamaño del archivo antes de cargarlo

¿Hay alguna forma de averiguar el tamaño del archivo antes de cargar el archivo usando AJAX / PHP en caso de cambio del archivo de entrada?

Para el HTML a continuación

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

prueba lo siguiente:

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

});

Ver siguiente hilo:

¿Cómo verificar el tamaño de entrada del archivo 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();" />

Trabajar en IE y FF

Aquí hay un ejemplo simple de cómo obtener el tamaño de un archivo antes de cargarlo. Está usando jQuery para detectar cuándo se agregan o cambian los contenidos, pero aún puede obtener files[0].sizesin usar 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>

Aquí hay un ejemplo más completo, un código de prueba de concepto para arrastrar y soltar archivos en FormData y subirlos a través de POST a un servidor. Incluye una simple verificación del tamaño del archivo.

Tuve el mismo problema y parece que no hemos tenido una solución precisa. Espero que esto pueda ayudar a otras personas.

Después de tomarme un tiempo explorando, finalmente encontré la respuesta. Este es mi código para adjuntar el archivo con jQuery:

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

Este es solo el código de ejemplo para obtener el tamaño del archivo. Si desea hacer otras cosas, no dude en cambiar el código para satisfacer sus necesidades.

La mejor solución que funciona en todos los navegadores;)

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

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

ACTUALIZAR: Usaremos esta función para verificar si es el navegador IE o no

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

Los navegadores compatibles con HTML5 tienen propiedades de archivos para el tipo de entrada. Por supuesto, esto no funcionará en versiones anteriores de 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 solución de ucefkh funcionó mejor, pero debido a que $ .browser estaba en desuso en jQuery 1.91, tuvo que cambiar para usar 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);
    }
}

debe hacer una solicitud HEAD ajax para obtener el archivo. con jquery es algo como esto

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

No lo utilice, ActiveXya que es probable que muestre un mensaje de advertencia aterrador en Internet Explorer y asuste a sus usuarios.

Si alguien quiere implementar esta verificación, solo debe confiar en el objeto FileList disponible en los navegadores modernos y confiar en las verificaciones del lado del servidor solo para los navegadores más antiguos ( mejora progresiva ).

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

Puede utilizar la función PHP. Durante la carga usando ajax, verifique primero haciendo una solicitud de ajax al script php que verifica y devuelve el valor.

Puede usar la API de archivos HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Sin embargo, siempre debe tener un respaldo para PHP (o cualquier otro lenguaje de backend que use) para los navegadores más antiguos.

Personalmente, diría que la respuesta de Web World es la mejor hoy en día, dados los estándares HTML. Si necesita admitir IE <10, deberá utilizar alguna forma de ActiveX. Evitaría las recomendaciones que implican codificar contra Scripting.FileSystemObject, o instanciar ActiveX directamente.

En este caso, he tenido éxito al usar bibliotecas JS de terceros, como plupload, que se pueden configurar para usar apis HTML5 o controles Flash / Silverlight para completar los navegadores que no los admiten. Plupload tiene una API del lado del cliente para verificar el tamaño del archivo que funciona en IE <10.