Edit in JSFiddle

$(document).ready(function(){
    $('#image-file').bind('change', function() {
        
        var fileSize = this.files && this.files.length > 0 && this.files[0].size ? this.files[0].size / 1024 / 1024 : 0;
        
        if(fileSize > 0){
            $('body').append('<div class="file valid">' + fileSize + ' MB</div>');  
        }
        else{
            $('body').append('<div class="file invalid">' + fileSize + ' MB</div>'); 
        }            
    });
});

<a href="http://www.whatibroke.com/?p=1002" title="WhatIBroke" target="_blank">WhatIBroke</a>

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
</form>

.file{
padding: 5px 7px;
border-radius: 3px;
background-color: green;
color: white;
margin: 5px;
}

.file.valid{
background-color: rgb(127, 197, 127);
}

.file.invalid{
background-color: rgb(197, 127, 127);
}