Obtener el tamaño del archivo antes de cargarlo

91

¿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?

Nisanth Kumar
fuente
2
y obviamente duplicado de stackoverflow.com/search?q=file+size+before+upload
Your Common Sense
Aquí hay un tutorial paso a paso para obtener el nombre, el tipo y el tamaño del archivo codepedia.info/…
Satinder singh

Respuestas:

134

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?

Brij
fuente
1
¿No existe la matriz de archivos en Internet Explorer (versiones anteriores)?
Tiago César Oliveira
4
Sí, esto no funciona antes de IE 10 y solo tiene soporte parcial en Android e iOS. caniuse.com/fileapi . Si fuera tan fácil ...
styks
2
¿Supongo que el resultado está en bytes?
Erdal G.
4
@ErdalG. ¡Buena pregunta! A MDN le falta la documentación, pero FileList.fileses una matriz de Fileobjetos, que es una extensión de Glob. Y de acuerdo con la especificación , de Globhecho define la sizepropiedad como el número de bytes (0 para un archivo vacío). Entonces sí, el resultado está en bytes .
John Weisz
14
<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

Behnam Bakhshi
fuente
15
votó en contra porque la respuesta usa ActiveX. en 2015, incluso Microsoft está abandonando ActiveX. Si bien fue una sugerencia razonable cuando se dio, recomendaría a los desarrolladores que eviten esto ahora y en el futuro.
Scott Stone
3
Me gusta esta solución, porque solo las versiones anteriores de IE devolverán verdadero para window.ActiveXObject.
Rob Breidecker
@scottstone No entiendo por qué rechazó todas las respuestas compatibles con navegadores heredados. Esta respuesta es mucho más limpia que las que usan huellas digitales del navegador y de ninguna manera recomiendo a nadie que use ActiveX.
Nicolas Bouvrette
@NicolasBouvrette: estoy de acuerdo en que esta respuesta es mucho más limpia que las demás, pero no puedo eliminar el voto negativo en este momento. La pregunta original no pedía compatibilidad con versiones anteriores de IE, y esta respuesta no advierte a los lectores que la mayor parte del código está ahí para admitir versiones de IE de más de 5 años.
Scott Stone
@scottstone En realidad, un punto más tangible desde mi punto de vista sobre por qué no usar ActiveX es porque muestra un mensaje de advertencia en IE que es una experiencia de usuario horrible (¿aterradora?).
Nicolas Bouvrette
13

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.

irregular
fuente
8

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.

Hoang Le
fuente
Me gusta este porque no es necesario colocarlo en el evento de cambio como la solución más popular. Y también me gusta el hecho de que me haya dado permiso para cambiar el código para satisfacer mis necesidades :)
Matt
8

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;
}
ucefkh
fuente
3
votó en contra porque la respuesta usa ActiveX. en 2015, incluso Microsoft está abandonando ActiveX. Si bien fue una sugerencia razonable cuando se dio, recomendaría a los desarrolladores que eviten esto ahora y en el futuro. -
scott piedra
1
$ .browser se eliminó de jQuery en la versión 1.9 (en desuso desde v 1.3).
Silvio Delgado
2
@scottstone, esto es para compatibilidad con versiones anteriores y eso no es cierto. Microsoft no renunciará a ActiveX, se usa mucho en muchas cosas y aquí está la prueba computerworld.com/article/2481188/internet/…
ucefkh
@SilvioDelgado Cambiado y actualizado eliminaron $ .browser en un complemento, por lo que solo necesitaremos una pequeña prueba para el navegador IE (funciona con todas las versiones)
ucefkh
4

$(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>

vishay duro
fuente
3

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);
}
Sandeep G
fuente
2

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);
    }
}
Miguel
fuente
1

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"));
    }
  });
kasper taeymans
fuente
¿Pero si la entrada del archivo se borrará (se vaciará)? ¿Puedes dar un ejemplo? Gracias
DeLe
1

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

Advertencia de ActiveX

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;
}
Nicolas Bouvrette
fuente
0

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.

rechie
fuente
0

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.

piedra de scott
fuente