6

I have in my form an input element with type of file. What I like to do is to check the file size before the element is uploaded for validation issue. By using the majority of primary Web Browsers (except IE that always does things harder), I have find out that all are using an "attribute" that updated whenever I choose a new file and display the file size, as well other usefull information.

Here is what I see in Chrome web browser :

enter image description here

The question now is, how can I access that value with JavaScript ? I have try several ways, but none was good for me ? Any good idea please ?

NOTE: In my web site I use jQuery, so is not important to be only regular JavaScript the answer.

Kind regards Merianos Nikos

KodeFor.Me
  • 13,069
  • 27
  • 98
  • 166

2 Answers2

3
//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]);
JKing
  • 807
  • 5
  • 14
0

or :

$("#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);
});
molecule
  • 31
  • 4