Detecting File Upload size in jQuery

Using the HTML5 File API, we can detect the size of an uploaded file.

by Ganesh Salunkhe

HTML

<form action="upload" enctype="multipart/form-data" method="post">
    Upload image:<br />
    <input id="image-file" type="file" name="file" /><br />
    <input type="submit" value="Upload" />
</form>

SCSS

// TITLE: Detecting File Upload size in jQuery
// DESCRIPTION: Using the HTML5 File API, we can detect the size of an uploaded file.
// CREDIT: http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation

JavaScript

$('#image-file').bind('change', function() {
    alert('This file size is: ' + this.files[0].size/1024 + "KB");
});