如何使用 JavaScript 访问文件元素的文件属性
Posted
技术标签:
【中文标题】如何使用 JavaScript 访问文件元素的文件属性【英文标题】:How to access files attribute of a file element using JavaScript 【发布时间】:2012-04-11 08:35:30 【问题描述】:我的表单中有一个文件类型的输入元素。我喜欢做的是在上传元素之前检查文件大小以进行验证问题。通过使用大多数主要的 Web 浏览器(除了 IE,它总是做事更难),我发现所有浏览器都在使用一个“属性”,每当我选择一个新文件并显示文件大小以及其他有用的信息时,它都会更新。
这是我在 Chrome 网络浏览器中看到的内容:
现在的问题是,如何使用 javascript 访问该值?我尝试了几种方法,但没有一个对我有好处?请问有什么好办法吗?
注意:在我的网站中,我使用 jQuery,所以只使用常规 JavaScript 并不重要。
亲切的问候 梅里亚诺斯·尼科斯
【问题讨论】:
可能重复***.com/questions/1440723/find-file-size-with-jquery 【参考方案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]);
【讨论】:
是否也可以通过类似的方式获取pdf文件的作者、创建者等属性?【参考方案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);
);
【讨论】:
以上是关于如何使用 JavaScript 访问文件元素的文件属性的主要内容,如果未能解决你的问题,请参考以下文章