采用第一个文件名值，但是，第二个文件名在输入文本字段中不显示任何值答案

【问题标题】：First file name value is taken, however, second file name do not show any value in the input textfield采用第一个文件名值，但是，第二个文件名在输入文本字段中不显示任何值
【发布时间】：2026-02-14 17:15:01
【问题描述】：

无法获取第二个文件输入字段的值。

下面的例子：

$(".upload").live("change",function(){
    var filename = document.getElementsByClassName('upload')[0].value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    document.getElementsByClassName('filename')[0].value = filename;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<input class="upload" type="file"/>
<input class="filename" type="text" />

<input class="upload" type="file"/>
<input class="filename" type="text" />

【问题讨论】：

标签： javascript php html arrays input

【解决方案1】：

试试这个：

$('input[type="file"]').live("change",function(){
    var filename = $(this)[0].value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    $(this).next('.filename').val(filename);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<input class="upload" type="file"/>
<input class="filename" type="text" />

<input class="upload" type="file"/>
<input class="filename" type="text" />

<input class="upload" type="file"/>
<input class="filename" type="text" />

<input class="upload" type="file"/>
<input class="filename" type="text" />

【讨论】：

.next 无法与表格一起使用，兄弟的解决方案是什么？
取决于html 的层次结构。用表格发布您的代码。

【解决方案2】：

您只能通过getElementsByClassName('upload')[0] 获得第一个输入的值。只需添加getElementsByClassName('upload')[1]。给你：

$(".upload").live("change",function(){
var filename = document.getElementsByClassName('upload')[0].value;
var filename1 = document.getElementsByClassName('upload')[1].value;
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
    filename1 = filename1.substring(lastIndex + 1);
}
document.getElementsByClassName('filename')[0].value = filename;
document.getElementsByClassName('filename')[1].value = filename1;
});

【讨论】：

我需要一个无限制的输入文件字段，而不是通过静态方式

【解决方案3】：

如果您是在没有 jquery 的纯 javascript 中执行此操作，因为您的 jsfiddle 没有使用 jquery。

$(".upload").live("change",function(e){
    var filename = e.currentTarget.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
  e.currentTarget.nextElementSibling.value = filename;
});

【讨论】：

【解决方案4】：

$(".upload").live("change",function(){
    var filename = $(this)[0].value;
    var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
}
   $(this).next('.filename').val(filename);
});

【讨论】：