只有第一个文件输入响应事件侦听器

only first of multiple file inputs responds to event listener

本文关键字：响应 事件 侦听器 输入 文件 第一个      更新时间：2023-09-26

我在一个页面上有多个表单，每个表单都有一个文件输入。当用户选择一个文件时，我想在相关表单内的<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>

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

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

$(function() {
  $('input.form-control').on('change', function(e) {
    var files = this.files,
        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' />
    </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>

编辑

此外，似乎您指的是单击<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>中。参考，请参见MDN的"label"示例。

请参阅下面的工作示例:

$(function() {
  $('input.form-control').on('change', function(e) {
    var files = this.files,
      filename = files[0].name;
    $(this).closest('form').find('.fileNameBox').html(filename);
  });
});
img.uploadFileImg {
  vertical-align: top;
}
<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>

相关文章：