Determining the size of the file using jQuery and HTML5

Posted by Vishalneeraj-24503 under HTML 5 category on | Points: 40 | Views : 246
The following HTML markup consists of an HTML FileUpload and a Button. When the button is clicked, a jQuery click
event handler is executed.
Inside the click event handler, first a check is performed to verify whether the browser supports HTML5 File API. If the browser supports HTML5 File API then the size of the file is determined and the displayed.
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<script type="text/javascript" src=""></script>
<script type="text/javascript">
$(function () {
$("#upload").bind("click", function () {
if (typeof ($("#fileUpload")[0].files) != "undefined") {
var size = parseFloat($("#fileUpload")[0].files[0].size / 1024).toFixed(2);
alert(size + " KB.");
} else {
alert("This browser does not support HTML5.");

Comments or Responses

Login to post response