I have the following code for when 'choose file' is clicked:

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

}





});

Fine, right? And all works well. That's great, except that when jQuery appends the table rows, it seems to like to start a new table, and the top <thead> isnt attached the to rows (in Chrome).

Okay I thought, we'll just build a string and put it all in at once.

Thus:

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

    });

But now all of a sudden, I get the following error:

*Uncaught TypeError: Cannot read property 'name' of undefined *

Nothing has changed, except the code around it. It is pointing to:

name = file.name,

Can you tell me what the problem is here?