Getting the file size of a file in javascript-CodePudding

<input id="archivo" name="archivo" type="file">

So my field of type file is called archivo which parent is formIncidencia, so what i'm doing to find it is:

$('#formIncidencia').find("[id='archivo']");

This works fine but when i'm trying to do:

 $('#formIncidencia').find("[id='archivo']").files[0].size;

it's not working like that, and i'm uploading a file so don't know what it's happening..

CodePudding user response：

You forgot to take the first element returned by jQuery's find:

$('button').click(() => console.log($('#formIncidencia').find("[id='archivo']")[0].files[0].size));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formIncidencia">
<input id="archivo" name="archivo" type="file">
</form>

<button>Log file size</button>

I guess you should just use a single selector to achieve this:

$('button').click(() => console.log($('#formIncidencia > #archivo')[0].files[0].size));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formIncidencia">
<input id="archivo" name="archivo" type="file">
</form>

<button>Log file size</button>

Also, if your page respects the HTML spec, it should not have more than one element with archivo as the id so even #formIncidencia would be superfluous.

CodePudding user response：

Using $('#formIncidencia').find("[id='archivo']") will return an array of matches even if you only have 1 input field. So you would have to change it to $('#formIncidencia').find("[id='archivo']")[0].files[0].size;.

CodePudding user response：

try the following:

$('#formIncidencia').find('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});