Javascript 多输入文件元素上的addEventListener

我有一个foreach循环，它为我提供了多个（大约5个）文件输入元素

我得到了一个简单的提交按钮的形式工作，但我想让它的工作没有一个太（上传时选择）

我被困在试图让Js或jQuery对点击的按钮做出反应的过程中

My

php

提供上传按钮：

<?php
  $getCampaign = new Crud();
  $query = "SELECT * FROM `table`";
  $aRow = $getCampaign->getData($query);

  if ($aRow == false){
    echo '<div class="alert alert-danger">No Campaigns!<br/></div>';
  } else { 
    foreach ($aRow as $row) {
      echo '<div class="row marginBottom">';
      echo '<div class="col-sm-2"><strong> '. $row['campaign'] .' </strong></div>';
      echo '<div class="col-sm-5"> '. $row['sort'] .'</div>';
      echo '<div class="col-sm-5">
        <form method="post" enctype="multipart/form-data"  action="process-upload-excel.php">
        <input type="file" id="' . $row['campaign'] . $row['sort'] .'" class="btn btn-primary btn-sm">
        <button type="submit" class="addfile">Upload File!</button>
      </form>';
      echo '</div></div>';
  }
<hr/>

  <div id="content">
      <div id="response"></div>
        <ul id="image-list">
        </ul>
  </div>

我在数据库中有“活动”和“排序”

我从这些条目中创建输入文件元素。 这样人们就可以为正确的活动上传正确的文件

但是对于这个例子，我如何正确地使用addevenlister呢

我希望有人能教育我

提前感谢

您可以使用并按如下方式操作：

html

<div id="content">

</div>

JS

// Add two uploaders
for (var i = 1; i <= 2; i++) {
  $('#content').append($('<input type="file" id="uploader' + i + '">'));
}

// Add listener for them
$("#content").delegate("input[type=file]", "change", function() {
  alert($(this).attr("id"));
});

//添加两个上载程序
对于（var i=1；我没有看到任何
输入[type=file]
elements。谢谢Adam，你说得对。我不小心删除了它。Post被编辑了。看起来你想用ajax上传文件……你可以很清楚地看到，你需要循环所有元素并附加事件。@shushu谢谢，这比我拥有的还要好。我肯定会使用它。但我的问题是多个输入文件元素。如果我有5个文件输入元素，我如何在选择后将其与addEventListener一起使用（从单击的输入元素）直接上载文件。@StephanTips它对所有这些元素都有效。我在答案中添加了一个提琴。请再次查看。
// Add two uploaders
for (var i = 1; i <= 2; i++) {
  $('#content').append($('<input type="file" id="uploader' + i + '">'));
}

// Add listener for them
$("#content").delegate("input[type=file]", "change", function() {
  alert($(this).attr("id"));
});