如何附加输入类型文件并使用jquery将文件传递给它

Question

我有一个输入类型文件，它的ID是“图标”，它可以重复多次。 所以当我点击它时我有一个按钮它会附加一个新的输入类型文件，我需要将上传的文件从“icon”输入发送到这个新的输入，Jquery这里是我的代码

<input type="file" class="chooseFile" accept="image/*" id="icon">
<button type="button"  id="add_item">add item</button>
<div id="appended_inputs"></div>

这是jquery代码

$('#add_item').click(function(){
   $('#appended_inputs').append(
       `<input type="file" id="new_icon"`>
   );
   $('#new_icon').val($('#icon').val());
});

谁能帮我！

Answer 1

您的解决方案的问题在于您将拥有具有相同ID的多个元素。

尝试使用此代码，它可能是您想要的：

$('#add_item').click(function() {
  $('#appended_inputs').append('<input type="file" class="new_icon" >');
  $('.new_icon:last').get(0).files= $('#icon').get(0).files;
});

演示

 $('#add_item').click(function() { $('#appended_inputs').append('<input type="file" class="new_icon" >'); $('.new_icon:last').get(0).files= $('#icon').get(0).files; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="file" class="chooseFile" accept="image/*" id="icon"> <button type="button" id="add_item">add item</button> <div id="appended_inputs"></div>