JQuery file upload size validation

Hi,

In my project I am doing file upload size validation for images,documents and videos.

It is possible to check file size using JQuery. I have following example but not giving me result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery File Upload</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script  src="jquery.min.js"></script>
 <script type="text/javascript">
        $('#image-file').bind('change', function() {
			alert('Hi');
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
    </script>
</head>

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

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



</form>
</body>
</html>

Any Idea?

-Thanks
Zohaib.

JavaScript has no access to the file and so neither does JQuery.

You will either have to set the maximum file size in the HTML and/or check it once it gets to the server.

Thanks felgall ,

Zohaib.

Hi zohaib82,

As felgall says you don’t have access to file system (for example reading and writing local files), however, due to HTML5 File API specification, there are some file properties that you do have access to, and the file size is one of them.

The problem with the script that you posted, is that the JavaScript is in the wrong position and is being called before the elements it is attempting to reference exist on the page.
Move your script to just before the closing <body> tag and it will work as expected.

Also, you are including jQuery twice (bad idea) and you should prefer the .on() method over .bind() in jQuery (here’s why).

I revised your script a little:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>JQuery File Upload</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>

  <body>
    <form action="upload" enctype="multipart/form-data" method="post">
      Upload image:
      <input id="image-file" type="file" name="file" />
      <input type="submit" value="Upload" />
    </form>
  
   <script type="text/javascript">
      $('#image-file').on('change', function() {
        console.log('This file size is: ' + (this.files[0].size/1024/1024).toFixed(2) + " MB");
      });
    </script>
  </body>
</html>

I am using the console to log the output.
Here is a brief tutorial on why this is a good idea and how to see the result.

HTH

Ref. http://stackoverflow.com/questions/1601455/check-file-input-size-with-jquery

Excellent Pullo.

It works in Firefox and Google Chrome.

As per following link IE is not modern browser and does not support HTML5 therefore I think it is not working in IE.

http://www.theregister.co.uk/2011/02/15/mozilla_on_ie9/

http://people.mozilla.com/~prouget/ie9/

-Thanks
Zohaib.

Hi Zohaib,

Nice links :slight_smile:

The good news is that it works in IE 10 as this browser supports the HTML5 file API, but you are right, IE 9 (and below) don’t play ball.
If it is important for you to support these browsers, then you can use http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/ and you’re good to go.

E.g.

<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <form action="upload" enctype="multipart/form-data" method="post">
      Upload image:
      <input id="image-file" type="file" name="file" />
      <input type="submit" value="Upload" />
    </form>
    
    <script type="text/javascript">
      $('#image-file').on('change', function() {
        console.log('This file size is: ' + (this.files[0].size/1024/1024).toFixed(2) + " MB");
      });
    </script>
  </body>
</html>