dynamically create input file element in jQuery MultiFile plugin

Question

I'm using jQuery MultiFile plugin, this is a ordinary view of that plugin

this is the HTML syntax for this

<input type="file" id="someName" name="file" class="multi" onchange="return Plugins.handleFileSelect(this);"/>

I'm trying to generate this file input dynamically

So I tried to append this once "click here" button click happens

 <button type="button" id="ifile">click here</button>             
 <div id="target_div"></div> 

<script type="text/javascript">

    $('#ifile').click(function () {
        // when the add file button is clicked append
        // a new <input type="file" name="someName" />
        // to a target_div div
        $('#target_div').append(
            $('<input/>').attr('type', "file").attr('name', "file").attr('id', "someName").attr('class', "multi").attr('onchange', "return Plugins.handleFileSelect(this);")
        );
    });
</script>

but once I do this its generating ordinary file input but its not listing files properly

once I open inspect elements I can see a view like following

how can I generate this properly

Surender · Accepted Answer · 2017-02-26 14:35:56Z

2

You should use MultiFile plugin instead

$('#ifile').click(function () {
    // when the add file button is clicked append
    // a new <input type="file" name="someName" />
    // to a target_div div
    var input = $('<input/>')
                .attr('type', "file")
                .attr('name', "file")
                .attr('id', "someName");
    //append the created file input
    $('#target_div').append(input);
    //initializing Multifile on the input element
    input.MultiFile();
});

answered Feb 26, 2017 at 14:35

Surender

7575 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kez Over a year ago

your answer very accurate, I wish if you can answer this question too which is hide "No file choosen text in above multifile input" and I have another question which is shorten the lengthy label name in jQuery MultiFile

Levent Saatci · Accepted Answer · 2017-02-26 14:09:23Z

0

you can use append like this

$('#target_div').append('<input type="file" id="someName" name="file" class="multi" onchange="return Plugins.handleFileSelect(this);"/>')

btw you can check the jquery documentation for append

http://api.jquery.com/append/

answered Feb 26, 2017 at 14:09

Levent Saatci

4143 silver badges4 bronze badges

Collectives™ on Stack Overflow

dynamically create input file element in jQuery MultiFile plugin

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related