为什么我的输入 type=file 没有加载文件信息？答案

【问题标题】：Why is my input type=file not loading file information?为什么我的输入 type=file 没有加载文件信息？
【发布时间】：2016-07-14 09:56:38
【问题描述】：

试图解决这个问题。我有一个 <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
 });

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

谢谢！

【问题讨论】：

Reading file contents on the client-side in javascript in various browsers的可能重复

标签： javascript jquery html

【解决方案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

【讨论】：

【解决方案2】：

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

 });

使用 event.target.files

【讨论】：

所有好的答案，但我最喜欢这个，因为它看起来最干净。 - 谢谢大家！

【解决方案3】：

这是我的解决方案：

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

【讨论】：

【解决方案4】：

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

enter link description here希望对你有帮助

【讨论】：