CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcfile-upload
Banshee
Banshee

Reputation: 15807

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 set a second will be shown (up to a max of 10). Say that we have filled 5 and there is 6 visible. We now clear the second input, this will result in two empty inputs so then the last(6(empty)) input should be hidden.

Is this possible to to with Jquery?

Edit1: This is what I manage to create, it works fine. I am however sure that someone that know jquery better could make a smarter script:

In the view:

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

The Script:

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

What is a better solution?

Upvotes: 5

Views: 48695

Answers (4)

Nima shayesteh
Nima shayesteh

Reputation: 1

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

Upvotes: 0

jade290
jade290

Reputation: 433

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.

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074248

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?

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038770

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

Upvotes: 12

Related Questions