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? /

Thanks for any help.

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/aHrTd/

Thanks for any help.

• javascript
• jquery
• html
• file-upload

• 2 You're creating multiple elements with the same ID file. IDs have to be unique. – Barmar Commented Jun 19, 2013 at 21:27

4 Answers 4

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 />'));
}

Here is a solution: http://jsfiddle/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./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>

Your inputs have to have unique ids. Give them a unique id and it should work fine.

You can use .last()

HTML

<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" class='dynamic-file' /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />

JS

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