Adding file inputs dynamically with jquery?

Question

To make my armage as compatible as possible, I will use regular file input, the problem is that I need to offer several downloads.

I think that when the first input is set, the second will be shown (up to a maximum of 10). Let's say that we have completed 5 and there are 6 visible. Now we will clear the second input, this will lead to two empty inputs, so the last (6 (empty)) input should be hidden.

Is this possible with jquery?

Edit1: this is what I manage to create, it works great. However, I'm sure someone who knows jquery better can make a smarter script:

According to:

        <div id="fileInput0" class="fileVisible">
            <input type="file" id="file0" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(0)" />
        </div>
        <div id="fileInput1" class="fileHidden">
            <input type="file" id="file1" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(1)" />
        </div>
        <div id="fileInput2" class="fileHidden">
            <input type="file" id="file2" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(2)" />
        </div>
        <div id="fileInput3" class="fileHidden">
            <input type="file" id="file3" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(3)" />
        </div>
        <div id="fileInput4" class="fileHidden">
            <input type="file" id="file4" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(4)" />
        </div>
        <div id="fileInput5" class="fileHidden">
            <input type="file" id="file5" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(5)" />
        </div>         
        <div id="fileInput6" class="fileHidden">
            <input type="file" id="file6" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(6)" />
        </div>
        <div id="fileInput7" class="fileHidden">
            <input type="file" id="file7" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(7)" />
        </div>
        <div id="fileInput8" class="fileHidden">
            <input type="file" id="file8" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(8)" />
        </div>
        <div id="fileInput9" class="fileHidden">
            <input type="file" id="file9" name="files" />
            <input type="button" value="Töm" onclick="resetFileField(9)" />
        </div>

Scenario:

function fileChangeHandler() {

    var hiddenClass = 'fileHidden';
    var visibleClass = 'fileVisible';

    var parentDiv = $(this).parent;
    var idNr = $(this).attr('id').replace('file', '');

    idNr++;

    if($(this).val().length > 0){

        for(var i = idNr; i < 10; i++){
            if($('#fileInput' + i).hasClass(visibleClass)){
                if($('#file' + i).val().length < 1){ return;}
            }
            else{
                    $('#fileInput' + i).attr('class' , visibleClass);
                    return;
            }
        }
    }
}

function resetFileField(id) {
    var hiddenClass = 'fileHidden';
    var visibleClass = 'fileVisible';
    var counter;

    $('#fileInput'+id).html($('#fileInput'+id).html());
    $('#file'+id).change(fileChangeHandler);

    for(var i = 9; i > -1 ;i--)
    {

        if(id != i)
        {
            if($('#fileInput' + i).hasClass(visibleClass)){
                if($('#file' + i).val().length < 1){
                    $('#fileInput' + i).attr('class', hiddenClass);
                }
            }
        }
    } 
}

Which solution is better?

Answer 1

div, :

$('#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

, , :

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

, : [jquery] ?

Answer 3

, JQuery, Bootstrap fileInput. . , , , , ..

<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>

- , .

Answer 4

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