Cómo acceder al atributo de archivos de un elemento de archivo usando JavaScript

Question

Tengo en mi forma un elemento de entrada con tipo de archivo. Lo que me gusta hacer es verificar el tamaño del archivo antes de que el elemento se cargue por un problema de validación. Al utilizar la mayoría de los navegadores web primarios (excepto IE, que siempre hace las cosas más difícil), he descubierto que todos están usando un "atributo" que se actualiza cada vez que elijo un archivo nuevo y se muestra el tamaño del archivo, así como otra información útil.

Aquí es lo que veo en Chrome navegador web:

La pregunta ahora es, ¿cómo puedo acceder a ese valor con JavaScript? Lo he intentado de varias maneras, ¿pero ninguna fue buena para mí? ¿Alguna buena idea, por favor?

NOTA: En mi sitio web utilizo jQuery, por lo tanto, no es importante ser solo la respuesta de JavaScript normal.

Saludos cordiales Merianos Nikos

Answer 1

//use any ol' selector to get the <input /> element: 
var inputElement = document.querySelector("input[type='file']"); 

//then it's just like you'd access any object's attributes: 
var fileSize = inputElement.files[0].size; 
//note that it's a list of files, so you can loop through them 
//in case the element accepts multiple files 

//if you want all of the attributes, do something like: 
for (var key in inputElement.files[0]) 
    if (inputElement.files[0].hasOwnProperty(key)) 
     console.log(key,inputElement.files[0][key]); 

Answer 2

o:

$("#btStartUpload").on("click", function(evt) {   

    var filesSelected = document.getElementById('btInput').files; // FileList object 
    // var filesSelected = $('#btInput')[0].files; // with jQuery, any jQuery object have it's DOM element accessed using [0] 
    // var filesSelected = $('input[type=file]')[0].files; 
    console.log(filesSelected); 
});