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.

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

Adil Shaikh · Accepted Answer · 2013-06-19 21:25:40Z

8

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

answered Jun 19, 2013 at 21:25

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user889030 Over a year ago

nice but <br /> is it wrong place , put <br /> it start like <br /><input type ....

Robert Waddell · Accepted Answer · 2013-06-20 00:04:53Z

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>

bluetoft · Accepted Answer · 2013-06-19 21:24:00Z

0

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

answered Jun 19, 2013 at 21:24

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

Comments

Patrick · Accepted Answer · 2013-06-19 21:25:23Z

0

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

answered Jun 19, 2013 at 21:25

Patrick

8617 silver badges12 bronze badges

Collectives™ on Stack Overflow

Add file input to form using jQuery

4 Answers 4

1 Comment

Comments

Comments

HTML

JS

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

HTML

JS

Comments

Your Answer

Sign up or log in

Post as a guest

Related