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

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0