[解決済み] Uncaught TypeError: 未定義のプロパティ 'name' を読み取ることができない。

質問

ファイルを選択」がクリックされたときのために、以下のコードを用意しました。

$(':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);
    });

しかし、今、突然、次のようなエラーが発生しました。

* Uncaught TypeError: 未定義のプロパティ 'name' を読み取ることができません *。

周りのコード以外、何も変わっていません。 それは、次の場所を指しています。

name = file.name。

ここで何が問題なのか、教えていただけますか？

解決方法は？

このタイプのエラーは、コンテナ変数 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++)