javascript - 具有相同类名的第二个按钮无法获取文件名jquery

Question

我有两个文件上传按钮。当我上传文件时，我想在文本框中显示上传文件的文件名。对于第一个按钮，它正在工作。但对于第二个按钮，它采用第一个按钮上传的文件的名称。

$("#investment_form").on("change", ".file_upload_btn", function() {
  var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
  var showfilename = $(this).parent().find(".file_upload_name");
  showfilename.val(filename);
});

.file_upload_btn {
  position: relative;
  overflow: hidden;
  width: 95px;
}
.file_upload_btn input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}
.file_upload_name {
  background-color: #fff;
  float: left;
  margin-right: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <label>File 1</label>
  <input id="a" class="file_upload_name" placeholder="Choose File" disabled="disabled" />
  <div class="file_upload_btn">
    <span>Upload</span>
    <input id="1" type="file" class="upload" />
  </div>
</div>
<div class="block">
  <label>File 2</label>
  <input id="b" class="file_upload_name" placeholder="Choose File" disabled="disabled" />
  <div class="file_upload_btn">
    <span>Upload</span>
    <input id="2" type="file" class="upload" />
  </div>
</div>

请帮助。提前致谢。

Answer 1

就像您找到 .file_upload_name 一样，您需要对 input[type=file] 执行相同的操作，以便它知道要定位哪个。

$("#investment_form").on("change", ".file_upload_btn", function() {
    var parent = $(this).parent();
    var filename = parent.find('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
    var showfilename = parent.find(".file_upload_name");
    showfilename.val(filename);
});