SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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.


    Code:
    <!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.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks felgall ,


    Zohaib.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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:

    HTML Code:
    <!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/1...ze-with-jquery

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi Zohaib,

    Nice links

    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.

    HTML Code:
    <!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>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •