Question

160

Input type file.files selector not working in jQuery

rated 0 times [ 167] [ 7] / answers: 1 / hits: 32358 / 12 Years ago, fri, february 8, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kyla

Add To Favorites

Follow

Total Points: 77

Total Questions: 108

Total Answers: 111

Location: Grenada

Member since Mon, May 8, 2023

1 Year ago

answered 12 Years ago bryonk · Accepted Answer

$("#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!

}