第二个按钮具有相同的类名，无法获得文件名称jquery。

I have two file upload buttons. When I upload the file, I want to show the file name of the uploaded file in a text box. For the first button, it is working. But for the second button, it is taking the name of the file uploaded with first button.

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

$("#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>

Please Help. Thanks in advance.

请帮助。提前谢谢。

3 个解决方案

#1

Just like you find the .file_upload_name, you need to do the same with the input[type=file], so it knows which one to target.

就像您找到.file_upload_name一样，您需要对输入[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);
});

#2

This is because $('input[type=file]').val() will return the first occurrence only ( in your case the first file name ). you should do something like :

这是因为$(输入[type=file]).val()将只返回第一次出现(在您的情况下是第一个文件名)。你应该这样做:

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

#3

Firstly it's better practice to attach the event directly to the file input, instead of relying on the change event bubbling through the DOM.

首先，更好的做法是直接将事件附加到文件输入，而不是依赖于在DOM中冒泡的更改事件。

From there, you can more reliably get the filename that was uploaded by using the files collection of the input, instead of hacking around it's string value.

从那里，您可以更可靠地获得通过使用输入的文件集合而上传的文件名，而不是绕过它的字符串值。

To fix your main issue, you need to traverse the DOM to find only the .file_upload_name element within the same .block as the input which was changed. To do that you can use closest(). Try this:

为了解决您的主要问题，您需要遍历DOM，以在相同的.block中找到.file_upload_name元素。要做到这一点，您可以使用最近的()。试试这个:

$("#investment_form").on("change", ".upload", function() {
  var filename = $(this)[0].files[0].name;
  $(this).closest('.block').find(".file_upload_name").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>
<form id="investment_form">
  <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>
</form>

#1