javascript - 为什么我的input type=file 没有加载文件信息？

Question

我正在努力解决这个问题。我有一个 <input type='file'>用于上传文件的元素，作为使用旧版浏览器的用户的拖放选项的替代方案。

拖放上传工作正常，但出于某种原因，在使用输入选择文件时，files对象返回 undefined .

在下面的示例中，我包含了一个测试变量来检查事件监听器是否正在工作 - 它是 - 但尝试记录文件内容的尝试不起作用 - 无论我尝试记录完整的对象还是个人属性(property)。

代码如下:

HTML:

 <input type="file" id='uploadFile'>

Javascript (jQuery)

 doc.on('change', '#uploadFile', function(){
    var file = $(this);
    var test = 'Event Triggered';
    console.log(test);               //Returns 'Event Triggered'
    console.log(file.files);         //Returns undefined
    console.log(file.files[0]);      //Returns TypeError: cannot read property '0' of undefined
 });

我哪里错了？忍不住觉得这是某个地方的愚蠢疏忽，但我们将不胜感激。

谢谢!

Answer 1

files 属性位于 DOMElement 上，而不是 jQuery 对象。试试这个:

$(document).on('change', '#uploadFile', function() {
    var file = $(this)[0]; // note the [0] to return the DOMElement from the jQuery object
    var test = 'Event Triggered';

    console.log(test);
    console.log(file.files);
    console.log(file.files[0]);
});

Working example