如何附加输入类型文件

Question

在我的HTML中

如果我将类型更改为文本，那很好，但是当我更改类型时，单击文件不会发生任何事情

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

这是我的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

#u_f元素是input，因此您无法append()包含任何内容。如果您尝试添加another文件输入，则可以使用insert()，insertAfter()或任何其他DOM插入方法：

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

还请注意，我删除了id属性，因为您最终将使用添加的内容来复制它们，这会使HTML无效。

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>

Answer 3

您必须根据下一行更改代码

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

Answer 4

我在通过JavaScript添加的输入type =“ file”时遇到问题。它没有将数据传递到下一页