iterating through imput elements to assign values to an array

Question

The code below fetches a list of files that have been selected for upload.

It basically appends input elements inside a div above a form element:

<div id = "files_list"> </div>

How do I store all the attributes names in an array - fileNamesArray - on clicking the submit button.?

My attempt I'm yet to check if this works:

// beginning of attempt

// my approach: // alert the user if no file is selected for upload and submit is clicked else

// I'd have to iterate through the input elements and contained in the div id="files_list", fetch all the file names and push all the values into an array $filesArray.

//rough attempt

$("Submit").click(function () {

    $filesArray

    $(div#files_list).getElementById('input').each(function($filesArray) {  
        filesArray.push($this.attr("value"))
    });

    while( $filesArray.size != 0) {
        document.writeln("<p>" + $filesArray.pop() + "</p>");
    }
}

//end of attempt: I print out the names just to verify

Code Below:

$(document).ready(function(){   
var fileMax = 6;
$('#asdf').after('<div id="files_list" style="border:1px solid #666;padding:5px;background:#fff;" class="normal-gray">Files (maximum '+fileMax+'):</div>');
$("input.upload").change(function(){
doIt(this, fileMax);
});
});

function doIt(obj, fm) {
if($('input.upload').size() > fm) {alert('Max files is '+fm); obj.value='';return true;}
$(obj).hide();
$(obj).parent().prepend('<input type="file" class="upload" name="fileX[]" />').find("input").change(function() {doIt(this, fm)});
var v = obj.value;
if(v != '') {
$("div#files_list").append('<div>'+v+'<input type="button" class="remove" value="Delete" style="margin:5px;" class="text-field"/></div>')
.find("input").click(function(){
$(this).parent().remove();
$(obj).remove();


return true;
});
}
};

Code for the HTML form:

<td><form action="test.php" method="post" enctype="multipart/form-data" name="asdf" id="asdf">
      <div id="mUpload">
    <table border="0" cellspacing="0" cellpadding="8">
      <tr>
        <td><input type="file" id="element_input" class="upload" name="fileX[]" /></td>
        </tr>
      <tr>
        <td><label>
          <textarea name="textarea" cols="65" rows="4" class="text-field" id="textarea">Add a description</textarea>
        </label></td>
        </tr>
      <tr>
        <td><input name="Submit" type="button" class="text-field" id="send" value="Submit" /></td>
        </tr>
      </table><br />
        </div>
</form>

    <p class="normal"></td>

Answer 1

var my_array = new Array();

$('#asdf').bind('submit', function() {
    $.each(this.elements, function() {
        if ( this.type == 'file' ) {
            $('#file_list').append($(this).clone());
            my_array.push(this.value);
        }
    });

    for ( var i=0; i < my_array.length; i++ )
        alert(my_array[i]);
});

Here you go!

EDIT Updated due to OP's comment.