Adding File Inputs Dynamically With Jquery?

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 first input is

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

Solution 2:

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?

Solution 3:

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.

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

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

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