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

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

$（“#投资表格”）。关于（“更改”，“文件上传”\u btn”，函数（）{
var filename=$（'input[type=file]'）.val（）.replace（/C:\\fakepath\\/i，'）；
var showfilename=$（this.parent（）.find（“.file\u upload\u name”）；
showfilename.val（文件名）；
});
.file\u upload\u btn{
位置：相对位置；
溢出：隐藏；
宽度：95px；
}
.file\u upload\u btn input.upload{
位置：绝对位置；
排名：0；
右：0；
保证金：0；
填充：0；
字体大小：20px；
光标：指针；
不透明度：0；
过滤器：alpha（不透明度=0）；
}
.file\u上载\u名称{
背景色：#fff；
浮动：左；
右边距：30px；
}

文件1
上传
文件2
上传
这是因为
$（'input[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);
});

这是因为
$（'input[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);
});

就像您找到
.file\u upload\u 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);
});

就像您找到
.file\u upload\u 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);
});

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

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

要解决您的主要问题，您需要遍历DOM，在与已更改的输入相同的
.block
中只找到
.file\u upload\u name
元素。为此，您可以使用
closest（）
。试试这个：


$（“#投资表格”）。关于（“更改”，“上传”，函数（）{
var filename=$（this）[0]。文件[0]。名称；
$（this）.closest（'.block'）.find（“.file\u upload\u name”）.val（文件名）；
});
.file\u upload\u btn{
位置：相对位置；
溢出：隐藏；
宽度：95px；
}
.file\u upload\u btn input.upload{
位置：绝对位置；
排名：0；
右：0；
保证金：0；
填充：0；
字体大小：20px；
光标：指针；
不透明度：0；
过滤器：alpha（不透明度=0）；
}
.file\u上载\u名称{
背景色：#fff；
浮动：左；
右边距：30px；
}

文件1
上传
文件2
上传
首先，最好将事件直接附加到
文件
输入，而不是依赖DOM中冒泡的
更改
事件

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

要解决您的主要问题，您需要遍历DOM，在与已更改的输入相同的
.block
中只找到
.file\u upload\u name
元素。为此，您可以使用
closest（）
。试试这个：


$（“#投资表格”）。关于（“更改”，“上传”，函数（）{
var filename=$（this）[0]。文件[0]。名称；
$（this）.closest（'.block'）.find（“.file\u upload\u name”）.val（文件名）；
});
.file\u upload\u btn{
位置：相对位置；
溢出：隐藏；
宽度：95px；
}
.file\u upload\u btn input.upload{
位置：绝对位置；
排名：0；
右：0；
保证金：0；
填充：0；
字体大小：20px；
光标：指针；
不透明度：0；
过滤器：alpha（不透明度=0）；
}
.file\u上载\u名称{
背景色：#fff；
浮动：左；
右边距：30px；
}

文件1
上传
文件2
上传