how to append input type file

user_8663822 0
Viewed 5360

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

    });
html jquery
3 Answers

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.

user_5194130 

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

user_48261380

you have to change your code according to below line

 $("#u_f").append(" <input type=\'file\' name=\'pic\' accept=\'image/*\' id=\'u_f\' />b<br>.");
user_88395630
Related