Cross-browser checking on file size at client side before uploading it to the server?

Question

Client side validation is important to improve usability.

Is there any cross-browser way to validate the file size before uploading it to the server. I am using asp.net file upload control.

I found some third-party controls do that check:

http://ajaxuploader.com/Demo/simple-upload.aspx

and

http://demo.essentialobjects.com/Default.aspx?path=AJAXU

but How?

Answer 1

Previously, the only way to determine the filesize before the file was sent over to the server was to have 'thicker than javascript' client-side plugins/add-ons. These would have to be installed on the client system. E.g. using SWFUpload, Java applets, ActiveX controls.

Now, you can use the HTML5 File API, i.e.:

var size = document.getElementById('myfile').files[0].size;

Answer 2

This is now possible with HTML5's File API:

<script>
    var myFile = document.getElementById('myFile');
    var size;
    myFile.addEventListener('change', function() {
        size = this.files[0].size;
    });
</script>

This is supported by most of the latest browsers.

Internet Explorer supports this workaround involving ActiveX, but it requires lowering Internet Explorer's security settings, so it isn't really an option for most applications.

It takes more work, but use a Flash-based uploader such as SWFUpload if you really need to do this in IE9 or below. IE10 will (hopefully) add support for the HTML5 File API.