如何使用JavaScript访问文件元素的files属性

Question

我在我的表单中有一个文件类型的输入元素.我喜欢做的是在元素上传之前检查文件大小以确认问题.通过使用大多数主要Web浏览器(除了总是做得更困难的IE),我发现所有人都在使用"属性",每当我选择新文件并显示文件大小以及其他有用信息时,该属性都会更新.

以下是我在Chrome网络浏览器中看到的内容:

现在的问题是,如何使用JavaScript访问该值？我尝试了几种方法,但没有一种方法对我有好处？有什么好主意吗？

注意:在我的网站上我使用jQuery,因此只有常规JavaScript才能解决问题并不重要.

亲切的问候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]);