Estaba leyendo este http://dev.w3.org/html5/markup/input.file.html, pero sólo he encontrado el de «aceptar» atributo.

He probado este

<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" />

Es posible la validación por parte del cliente de tamaño de archivo?

He encontrado esta técnica para IE

<html>
<head>
<script>
function getSize()
{
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>

Es posible hacer lo mismo con html5 sistema de archivos de la api ?

ACTUALIZACIÓN

Yo podría hacer esto (demo):

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
    <form >
        <input type=file id=f max-size=32154 >
        <input type=submit>
    </form>
<script>
$(function(){
    $('form').submit(function(){
        var isOk = true;
        $('input[type=file][max-size]').each(function(){
            if(typeof this.files[0] !== 'undefined'){
                var maxSize = parseInt($(this).attr('max-size'),10),
                size = this.files[0].fileSize;
                isOk = maxSize > size;
                return isOk;
            }
        });
        return isOk;
    });
});
</script>
</body>

Se está trabajando bien, pero creo Que va a ser mejor para un nativo de html5 attr para validar

  • este.archivos[0].fileSize => este.archivos[0].tamaño

3 Comentarios

  1. 46
        <form  class="upload-form">
            <input class="upload-file" data-max-size="2048" type="file" >
            <input type=submit>
        </form>
        <script>
    $(function(){
        var fileInput = $('.upload-file');
        var maxSize = fileInput.data('max-size');
        $('.upload-form').submit(function(e){
            if(fileInput.get(0).files.length){
                var fileSize = fileInput.get(0).files[0].size; //in bytes
                if(fileSize>maxSize){
                    alert('file size is more then' + maxSize + ' bytes');
                    return false;
                }else{
                    alert('file size is correct- '+fileSize+' bytes');
                }
            }else{
                alert('choose file, please');
                return false;
            }
    
        });
    });
        </script>

    http://jsfiddle.net/9bhcB/2/

    • Gracias, pero he hecho una solución genérica.
    • Gospodarets Agradable anser, trabajado por mi código. Pregunta, ¿cómo puedo comprobar el tipo de archivo? Yo intente algo como alert('type'+fileInput.get(0).files[0].type); pero sin resultado. Y por desgracia, no hay errores en la consola. Gracias
    • está en desuso, pero estoy usando .tamaño del lugar, el cual es válido ( w3.org/TR/FileAPI )
    • debería funcionar. Demo del codepen.io/malyw/pen/nyvEt Buscar stackoverflow.com/questions/11182968/… para understastand, cuando .tipo podría devolver una cadena vacía.
    • Ahh lo siento por eso, este comentario fue en respuesta incorrecta. Mis disculpas.
    • No hay problema 😉

  2. 11

    Yo podría hacer esto (demo):

    <!doctype html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    </head>
    <body>
        <form >
            <input type="file" id="f" data-max-size="32154" />
            <input type="submit" />
        </form>
    <script>
    $(function(){
        $('form').submit(function(){
            var isOk = true;
            $('input[type=file][data-max-size]').each(function(){
                if(typeof this.files[0] !== 'undefined'){
                    var maxSize = parseInt($(this).attr('max-size'),10),
                    size = this.files[0].size;
                    isOk = maxSize > size;
                    return isOk;
                }
            });
            return isOk;
        });
    });
    </script>
    </body>
    </html>
    • De acuerdo a developer.mozilla.org/en-US/docs/Web/API/File.fileSize , fileSize ha quedado obsoleta. En lugar de eso todo el mundo debería utilizar size.
  3. 0

    si el uso de php para el backend tal vez usted puede utilizar este código.

    //Validate image file size
    if (($_FILES["file-input"]["size"] > 2000000)) {
        $msg = "Image File Size is Greater than 2MB.";
        header("Location: ../product.php?error=$msg");
        exit();
    }  

Dejar respuesta

Please enter your comment!
Please enter your name here