how to append input type file

Question

in my html

if i change type to text it's fine but when i change it type file nothing happen when i click

<input type="file" name="pic[]" accept="image/*" >a
<input type="file" name="pic[]" accept="image/*" id="u_f">b<br>
<button type="button" class="btn btn-info" id="btn1">
 <span class="glyphicon glyphicon-plus"></span>
</button>

Here is my jquery

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#u_f").append(" <input type='file' name='pic' accept='image/*' id='u_f' />b<br>.");
        // alert('hi');

    });

Answer 1

The #u_f element is an input, so you cannot append() any content to it. If you're attempting to add another file input, you can use insert(), insertAfter(), or any of the other DOM insertion methods:

$("#btn1").click(function() {
  $('<input type="file" name="pic" accept="image/*" />b<br>').insertBefore(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="pic[]" accept="image/*">a<br />
<input type="file" name="pic[]" accept="image/*">b<br />
<button type="button" class="btn btn-info" id="btn1">
 <span class="glyphicon glyphicon-plus">+</span>
</button>

Also note that I removed the id attributes as you would end up duplicating them with the added content, which would make the HTML invalid.

Answer 2

$(document).ready(function(){
  $("#btn1").click(function(){
     $("#u_f").parent().append($("<input/>",{type:"file",name:"pic",accept:'image/*',id:'u_f'})).append("b<br>");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" id="btn1">
 <span class="glyphicon glyphicon-plus">+</span>
</button>
<hr>
<input type="file" name="pic[]" accept="image/*" >a<br>
<input type="file" name="pic[]" accept="image/*" id="u_f">b<br>