Home/ Questions/Q 8351967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T08:48:41+00:00

I was reading this http://dev.w3.org/html5/markup/input.file.html , but I only found the accept attribute. I

  • 0

I was reading this http://dev.w3.org/html5/markup/input.file.html, but I only found the “accept” attribute.

I tried this 

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

Is it possible client-side validation of file size?

I found this technique for 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>

Is it possible to do the same using html5 filesystem api ?

UPDATE

I could do this (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>

It is working fine, but I think It will be better to a native html5 attr to validate

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I could do this (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>
    • 0