$(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); }