i want to get file size which i am uploading using html but it is not working

Question

i want to get file size which i am uploading using html but it is not working.

Here is my Code

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function() {
            $("document").ready(function() {
                $("#myFile1").change(function() {
                    var f1 = document.getElementById("myFile1").value;
                    if ((f.size || f.fileSize) == 09765625)
                    {
                        alert("file size is less than 1mb");
                    }
                    else
                    {
                        alert("file size should not exceed more than 1mb");
                        $(this).val($.data(this, 'f'));
                        return false;
                    }
                });
            });

        })
    </script>
  </head>
  <body>
     <input type='file' name="file" id="myFile1" />
  </body>
</html>

Dhaval Marthak · Answer 1 · 2014-09-19T05:01:15.217

It should be f

instead of f1

var f = document.getElementById("myFile1");

As you're checking variable f in conditions. so change it accordingly

And you should check file size using following

var f = $("#myFile1")[0].files[0].size;

$("#myFile1").change(function() {
         var f1 = document.getElementById("myFile1").value; // will get file input value
         var size = ($("#myFile1")[0].files[0].size); // get file size here

         if (size < 1048576) {
             alert("file size is less than 1mb");
         } else {
             alert("file size should not exceed more than 1mb");
             $(this).val($.data(this, 'f'));
             return false;
         }
     });

Demo

Girish · Accepted Answer · 2014-09-19T05:04:20.863

document.getElementById("myFile1").value is return only file name.

input file field is return file info in array so use [0] for first file, try this way

var file_size = document.getElementById("myFile1").files[0].size

Another issue: you have assigned Dom ref in f1 variable and using f in IF condition.. use f1 variable in condition, many bugs try this updated code

var f1 = document.getElementById("myFile1").files[0];
if (f1.file_size < 1048576)
{
   alert("file size is less than 1mb");
}

$(function() {
            $("document").ready(function() {
                $("#myFile1").change(function() {
                    var f1 = document.getElementById("myFile1").files[0];
                    if (f1.file_size < 1048576)
                    {
                        alert("file size is less than 1mb");
                    }
                    else
                    {
                        alert("file size should not exceed more than 1mb");
                        $(this).val($.data(this, 'f'));
                        return false;
                    }
                });
            });

        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='file' name="file" id="myFile1" />

score 0 · Answer 3 · edited May 23 '17 at 12:12

I changed code as below.

    <html>
     <head>
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
     <script type="text/javascript">
        $(function() {
            $("document").ready(function() {
                $("#myFile1").change(function() {
                    var f1 = this.files[0];
                    if (f1.size  < 1048576)
                    {
                        alert("file size is less than 1mb");
                    }
                    else
                    {
                        alert("file size should not exceed more than 1mb");
                        $(this).val($.data(this, 'f1'));
                        return false;
                    }
                });
            });

        })
    </script>
  </head>
  <body>
     <input type='file' name="file" id="myFile1" />
  </body>
</html>

You are doing incorrect DOM manipulations, better go with Jquery and try using some good online editors like w3c

Also, naming convention must be taken care of like you declared f1 variable and tried to use f

Also see this post.

i want to get file size which i am uploading using html but it is not working

3 Answers3

Demo