多个输入文件元素上的 addEventListener

Question

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

我的表单可以使用简单的提交按钮，但我也想让它在没有按钮的情况下工作（选择时上传）。

我无法尝试让 Js 或 jQuery 对单击的任何按钮做出反应。

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

js 的开始（到目前为止我得到的）：

//Check for FormData
if (window.FormData) {
  formdata = new FormData();
  $(".addfile").css("display", "none");
}

???.addEventListener("change", function (evt) {
  document.getElementById("response").innerHTML = '<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i><span class="sr-only">Loading...</span>';
// rest of code checking name of file etc.
}

我在数据库中得到了 'Campaign' 和 'Sort'。

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

但是对于此示例，我该如何正确使用 addEvenListener？

希望有人能不吝赐教

提前致谢

Answer 1

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

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"));
});

Online demo (Fiddle)

多个输入文件元素上的 addEventListener

addEventListener on multiple input file elements

javascript

php

jquery

form-data

addeventlistener