Adding file inputs dynamically with jquery?

Question

To make my weppage as compatible as possible I will go with the regular file input, the problem is that I need to offer multiple uploads.

My thought is that when the

Answer 1

You could have a container div which will harbor the new file input fields and a button to add new inputs:

$('#addFile').click(function() {
    // when the add file button is clicked append
    // a new <input type="file" name="someName" />
    // to a filesContainer div
    $('#filesContainer').append(
        $('<input/>').attr('type', 'file').attr('name', 'someName')
    );
});

Answer 2

Another option, since you are using JQuery is the Bootstrap fileInput. It lets you upload multiple images with one control. You have additional options too like the allowed file types, size, height, width, etc.

<script type="text/javascript">
    $("#postedImage").fileinput({
      uploadUrl: "/SomeUrl", // you must set this for ajax uploads
      maxFileCount: 10,
      enctype: "multipart/form-data",
      overwriteInitial: false
    });
</script>

<input id="postedImage" type="file" class="file" multiple>

Here is a link for other uploaders if you are interested.

Answer 3

Yes, you can just add a file input to the form as you would any other element:

$("#theForm").append("<input type='file' name='foo'>");

I thought this sounded familiar: [jquery]How do I add file uploads dynamically?

Answer 4

if you want to have diffrent input names

var i;
$('#addFile').click(function() {
    i=i+1;
    $('#filesContainer').append(
        $('<input/>').attr('type', 'file').attr('name', 'file'+i)
    );
});