CODEWITHSUNDEEP
javascriptjqueryhtmlfile-upload
Jakolcz
Jakolcz

Reputation: 564

Add file input to form using jQuery

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.

Upvotes: 4

Views: 22831

Answers (4)

Robert Waddell
Robert Waddell

Reputation: 854

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>

Upvotes: 2

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Upvotes: 8

Patrick
Patrick

Reputation: 861

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

Upvotes: 0

bluetoft
bluetoft

Reputation: 5443

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

Upvotes: 0

Related Questions