16

I'm trying to get information about the file being uploaded in an HTML input with the following code:

$(document).ready(function() {
  $('#btn').on('click', function() {
    file_size = $("#my_file").files[0].size;
    alert(file_size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="my_file" type="file" name="my_name" />
  <input id="btn" type="button" />
</form>

But it doesn't work, and the console returns: $("#my_file").files is undefined

3 Answers 3

54

$("#my_file") is a jQuery object, and a jQuery object does not have a property files...

To get the DOM element out of jQuery, do

$("#my_file")[0].files[0].size

As an extra note, if you have not selected any file, ($("#my_file"))[0].files[0] gives you undefined and ($("#my_file"))[0].files[0].size will throw error.
You are recommended to add a check...

if ($("#my_file")[0].files.length > 0) {
    file_size = $("#my_file")[0].files[0].size
} else {
    // no file chosen!
}
0
6

jQuery object doesn't have files property, you can use the old getElementById or jQuery get method for selecting the DOM Element object.

$(document).ready(function() {
  $('#btn').on('click', function() {
    file_size = document.getElementById("my_file").files[0].size;
    alert(file_size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="my_file" type="file" name="my_name" />
  <input id="btn" type="button" />
</form>

-5

$(document).ready(function() {
  $('#btn').on('click', function() {
    file_size = document.getElementById("my_file").files[0].size;
    alert(file_size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="my_file" type="file" name="my_name" />
  <input id="btn" type="button" />
</form>

1
  • This is an exact copy of another answer posted 4 years ago.
    – JJJ
    Jul 3, 2017 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.