Add file input dynamically to form using jQuery

Problem

You have basic form with file input field and you want to add new fields dynamically.

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<label for="file">File:</label>
<input type="file" name="files[]" class="file-input" /><br />
<input type="submit" name="upload" value="Upload file" />
</form>

Solution

You can use jQuery to dynamically add new field after a file is added. The script that takes care of that is really simple

<script type="text/javascript">
$('#upload').on('change', 'input[type=file]', function(){
  $('#upload input:file').last().after($('<input type="file" name="files[]" class="file-input" />'));
});
</script>