How to access files attribute of a file element using JavaScript

Question

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

Possible dup stackoverflow.com/questions/1440723/find-file-size-with-jquery — elclanrs
– elclanrs, Commented Apr 11, 2012 at 8:39

JKing · Accepted Answer · 2012-04-11 08:58:39Z

5

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

answered Apr 11, 2012 at 8:58

JKing

8475 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

toothie Over a year ago

Is it also possible to get attributes like author, creator of a pdf file in a similar manner?

molecule · Accepted Answer · 2014-11-21 07:08:36Z

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

answered Nov 21, 2014 at 7:08

molecule

314 bronze badges

Collectives™ on Stack Overflow

How to access files attribute of a file element using JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related