javascript - 使用 jQuery/JavaScript 在动态输入文件字段中获取选定的文件名

Question

我有动态输入类型文件字段，可以通过单击添加更多来添加更多内容

我已编写脚本以在选择文件名时获取文件名，但它仅适用于第一个字段，不适用于其他字段。

那么如何获取选中的所有文件名呢？

$("#em_add").click( function(){
			var decoration_box = $(".one").html();
			$(".logos").append('<div class="one">'+decoration_box+'</div>');
});

$('.logo').change(function () {
	var filePath=$(this).val(); 
	alert(filePath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">

  <div class="one">
    <input type="file" name="logo[]" id="logo" class="logo" />
  </div>
  
</div>

Answer 1

您正在动态添加元素，但是当您添加时，您并没有将事件处理程序附加到这些新元素。要解决此问题，您可以使用事件委托(delegate)，将事件附加到父 .logos。

$("#em_add").click( function(){
			var decoration_box = $(".one").html();
			$(".logos").append('<div class="one">'+decoration_box+'</div>');
});

$('.logos').on('change', '.logo', function () {
	var filePath=$(this).val(); 
	alert(filePath);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">

  <div class="one">
    <input type="file" name="logo[]" id="logo" class="logo" />
  </div>
  
</div>