为什么我的输入类型=文件没有加载文件信息?

时间:2016-07-14 09:56:39

标签: javascript jquery html html5

试着理解这个问题。我有一个<input type='file'>元素用于上传文件,作为旧版浏览器用户拖放选项的替代选择。

拖放上传工作正常,但由于某些原因,使用输入选择文件时,files对象返回undefined

在下面的示例中,我已经包含了一个测试变量来检查事件监听器是否正常工作 - 它是什么 - 但是尝试记录文件的内容是不行的 - 我是否尝试记录整个对象或个人财产。

以下是代码:

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

我哪里错了?不禁觉得这是一个愚蠢的疏忽,但任何帮助都会受到赞赏。

谢谢!

4 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:3)

这是我的解决方案:

$('#uploadFile').change(function()
{
   console.log(this.files);         
   console.log(this.files[0]);
});

答案 2 :(得分:2)

doc.on('change', '#uploadFile', function(e){
    var file = $(this);
    var test = 'Event Triggered';
console.log(e.target.files)

 });

使用event.target.files

答案 3 :(得分:2)

试试这个console.log($('#uploadFile')[0].files[0]);

enter link description here希望这会有所帮助