只有多个文件输入中的第一个响应事件监听器

Question

我在页面上有多个表单，每个表单都有一个文件输入。当用户选择文件时，我想在相关表单内的<span class="fileNameBox"></span>中打印所选文件的名称。

我遇到两个问题：

1. 只有第一个输入通过显示所选文件名来响应。
2. 单击特定输入的<label>内的图像时，文件名始终显示在第一个“fileNameBox”中，而不是与<label>关联的文件名。

我该如何解决这两个问题？

$(function() {
  document.querySelector('input[name="file[]"]').onchange = function(e) {
    var files = this.files;
    var filename = files[0].name;
    $(this).closest('form').find('.fileNameBox').html(filename);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <span class="fileNameBox"></span>
      <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' id="uploadFile" />
    </div>
    <label class="col-md-1 col-xs-1 control-label" for="uploadFile">
      <img src="images/photoIconOn.png" alt="" class="uploadFileImg" />
    </label>
  </div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <span class="fileNameBox"></span>
      <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' id="uploadFile" />
    </div>
    <label class="col-md-1 col-xs-1 control-label" for="uploadFile">
      <img src="images/photoIconOn.png" alt="" class="uploadFileImg" />
    </label>
  </div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <span class="fileNameBox"></span>
      <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' id="uploadFile" />
    </div>
    <label class="col-md-1 col-xs-1 control-label" for="uploadFile">
      <img src="images/photoIconOn.png" alt="" class="uploadFileImg" />
    </label>
  </div>
</form>

Answer 1

document.querySelector＆＃34; 返回文档中的第一个元素...与指定的选择器组匹配。＆＃34;因此，只返回页面上的第一个匹配输入。

您可以使用document.querySelectorAll并为每个返回的元素附加一个侦听器。但是，既然你已经在使用jQuery，我建议使用jQuery来选择你的输入：

＆＃13;

＆＃13;

$(function() {
  $('input.form-control').on('change', function(e) {
    var files = this.files,
        filename = files[0].name;
    $(this).closest('form').find('.fileNameBox').html(filename);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <span class="fileNameBox"></span>
      <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' />
    </div>
  </div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <span class="fileNameBox"></span>
      <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' />
    </div>
  </div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <span class="fileNameBox"></span>
      <input type='file' name='file[]' class=' form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' />
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

修改

此外，您似乎指的是点击<label>图片仅选择第一个输入。这是因为您的所有输入都具有相同的ID。 ID必须是唯一的，如下所示：

<input type='file' name='file[]' id="uploadFile1" />
<input type='file' name='file[]' id="uploadFile2" />
<input type='file' name='file[]' id="uploadFile3" />

作为替代方案，我已完全删除了ID，并将每个<input> 放在中<label>。有关参考，请参阅examples for "label" at MDN。

请参阅下面的工作示例：

＆＃13;

＆＃13;

$(function() {
  $('input.form-control').on('change', function(e) {
    var files = this.files,
      filename = files[0].name;
    $(this).closest('form').find('.fileNameBox').html(filename);
  });
});

＆＃13;

img.uploadFileImg {
  vertical-align: top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <label class="col-md-1 col-xs-1 control-label">
        <img src="http://lorempixel.com/20/20/abstract/2/" alt="" class="uploadFileImg" />
        <span class="fileNameBox"></span>
        <input type='file' name='file[]' class='form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' />
      </label>
    </div>
  </div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <label class="col-md-1 col-xs-1 control-label">
        <img src="http://lorempixel.com/20/20/abstract/2/" alt="" class="uploadFileImg" />
        <span class="fileNameBox"></span>
        <input type='file' name='file[]' class='form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' />
      </label>
    </div>
  </div>
</form>
<form class="form-horizontal" action='#' method="post" enctype="multipart/form-data">
  <div class="form-group">
    <div class="col-md-8 col-xs-12">
      <label class="col-md-1 col-xs-1 control-label">
        <img src="http://lorempixel.com/20/20/abstract/2/" alt="" class="uploadFileImg" />
        <span class="fileNameBox"></span>
        <input type='file' name='file[]' class='form-control file-field hideBox' maxlength='1' accept='gif|jpg|png|bmp' />
      </label>
    </div>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;