Add file input to form using jQuery

Question

I'm pretty new to jQuery and I'm trying to make simple HTML upload page and I want to add new file input to form after selecting some file. I've tried this code

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form></body>
<script>
$('#upload').delegate('input[type=file]', 'change', function(){
  alert('Alert');
  addField();
});
</script>

and this addField() function

function addField(){
  $('<input type="file" name="files[]" id="file" /><br />').insertAfter('#file');
};

But if I run this code, the 3rd input field is inserted after the 1st one instead of after the last field. Is it possible to add input fields after the last file input without using unique ids for these inputs? http://jsfiddle.net/aHrTd/

Thanks for any help.

Answer 1

How about this - (find last input:file in form and insert new input after it)

function addField(){
  $('form input:file').last().after($('<input type="file" name="files[]" class="file" /><br />'));
}

Answer 2

Here is a solution: http://jsfiddle.net/aHrTd/4/

Adds a unique name and id to the new file inputs and inserts after last file input as pXL has suggested.

Note that I have used one of the most under-utilized jQuery abilities, though it easy to find (http://api.jquery.com/jQuery/) can build a new element for you in a nice clean way.

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files" id="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>

<script>
function addField(){
    var lastfile = $('form input:file').last();
    var countfile = ($('form input:file').length)+1;
    $( "<input/>", {
        "type": "file",
        "name": "file_"+countfile,
        "id": "file_"+countfile
    }).insertAfter(lastfile);
    fileinputmonitor();
}

function fileinputmonitor(){
    $('input[type="file"]').change(function(){
        alert('Alert');
        addField();
    });
}

fileinputmonitor();
</script>