javascript - 未捕获的类型错误 : Cannot read property 'name' of undefined

Question

单击“选择文件”时，我有以下代码:

$(':file').change(function () {

if(this.files.length == 1) {
    $('#selected_files').html("<h4>Attaching " + this.files.length + " file</h4>");
} else {
    $('#selected_files').html("<h4>Attaching " + this.files.length + " files</h4>");
}

$('#selected_files').append("<table class=\"altShaded\"><thead><tr><td></td><td>Filename</td><td>Size</td></tr></thead>");

for(x=0;x<=this.files.length;x++)
{
    var file = this.files[x], 
    name = file.name, 
    size = file.size, 
    type = file.type;
    $('#selected_files').append("<tr><td></td><td><b>" + name + "</b> ("+filesize(size)+") " + type + "<br>");
}


});

很好，对吧？一切正常。这很好，除了当 jQuery 追加表格行时，它似乎喜欢开始一个新表格，并且顶部 <thead>未附加到行(在 Chrome 中)。

好吧，我想，我们只需构建一个字符串，然后立即将其全部放入。

因此:

$(':file').change(function () {

        if(this.files.length == 1) {
            var displayFiles = "<h4>Attaching " + this.files.length + " file</h4>";
        } else {
            var displayFiles = "<h4>Attaching " + this.files.length + " files</h4>";
        }


        var displayFiles = displayFiles + "<table class=\"altShaded\"><thead><tr><td></td><td>Filename</td><td>Size</td></tr></thead>";
        for(x=0;x<=this.files.length;x++)
        {
            var file = this.files[x], 
            name = file.name, 
            size = file.size, 
            type = file.type;
            displayFiles = displayFiles + "<tr><td>" + type + "</td><td><b>" + name + "</b></td><td>"+filesize(size)+"</td></tr>";
        }

        $('#selected_files').html(displayFiles);
    });

但是现在突然间，我得到以下错误:

*未捕获类型错误:无法读取未定义的属性“名称”*

除了周围的代码外，什么都没有改变。它指向:

name = file.name,

你能告诉我这里的问题是什么吗？

Answer 1

这种类型的错误意味着你的容器变量file没有定义。

您应该在不同的地方使用 console.log 来查看定义的内容和未定义的内容(您的文件数组等)

还有:

for(x=0;x<=this.files.length;x++)

对于最后一个 x 值将是未定义的，因为数组的最后一个元素位于 array.length - 1 而不是 array.length，它在循环结束时给你一个未定义的值，可能是错误的来源。在您的情况下，x 转到值 this.files.length此外，始终使用 var，否则您的 x 将是一个全局变量，这可能是另一个问题来源。

正确的循环应该是:

for (var x = 0; x < this.files.length; x++)