CODEWITHSUNDEEP
javascriptjquerydom
KodeFor.Me
KodeFor.Me

Reputation: 13511

How to access files attribute of a file element using JavaScript

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

Upvotes: 7

Views: 15957

Answers (2)

molecule
molecule

Reputation: 31

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);
});

Upvotes: 0

JKing
JKing

Reputation: 847

//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]);

Upvotes: 5

Related Questions