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

Question

我的表单中有一个文件类型的输入元素。我喜欢做的是在上传元素之前检查文件大小以进行验证问题。通过使用大多数主要的 Web 浏览器（除了 IE，它总是做事更难），我发现所有浏览器都在使用一个“属性”，每当我选择一个新文件并显示文件大小以及其他有用的信息时，它都会更新。

这是我在 Chrome 网络浏览器中看到的内容：

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

注意：在我的网站中，我使用 jQuery，因此只使用常规 JavaScript 并不重要。

亲切的问候梅里亚诺斯尼科斯

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

或者 ：

$("#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);
});