Javascript 多输入类型=单页上的文件

我试图让用户使用

type=“file”

在我的网页上上载不同的文件，但问题是，无论用户选择哪个文件，相应的文本框中都不会显示名称。我尝试使用

jQuery

，但遇到了一个问题：无论文件上传到哪里，只有第一个文本框中的文本会发生变化

$（'input[name=“file6”]”）。更改（函数（）{
var fileName=$（'input[name=“file6”]”）。val（）；
警报（文件名）；
var subfileName=fileName.substring（12，fileName.length）；
document.getElementById（“upload6”）.value=子文件名；
});
$（'input[name=“file7”]”）。更改（函数（）{
var fileName=$（'input[name=“file7”]”）。val（）；
var subfileName=fileName.substring（12，fileName.length）；
document.getElementById（“upload7”）.value=子文件名；
});

*abcxyz
abcxyz
*abcxyz
首先，删除输入中重复的ID。ID在页面中必须是唯一的。
然后，您不需要为每个输入使用一个事件，您可以一次将一个事件附加到所有输入。像这样

$('input[type="file"]').on('change', function () {
      // your code
   });

话虽如此，您有两种方法可以从
input type=“file”
引用相应的文本框。一种是使用fromjQuery，它允许您存储和检索元素中的数据

您必须在每个
type=“file”
中设置引用的文本框。比如说

<input data-textbox-id="upload5" type="file"/>

如您所见，我存储了唯一的textboxId，然后使用它获取并用jQuery更新textbox。已为所有
输入类型=“文件”
注册此事件

见工作

另一种方法是，如果不想将其存储在HTML元素中，则从change函数导航DOM。问题是，如果更改dom结构（例如，将一个元素移动到另一个位置），它将中断。使用这种方法，您根本不会使用
.data（）
，您在change函数中的代码如下所示

$(this).closest('tr').find('input[type="text"]'.val(fileName);

但是，至少从我在代码中看到的情况来看，您的标记没有正确关闭。所以这到目前为止还不起作用。你得把它修好

虽然我强烈建议您修复未关闭的标记，但我更喜欢使用
.data（）
的第一种方法，这样您就不必依赖于DOM结构，您需要命名它们<代码>

etc@FlashThunder试过了，但还是不行

$(this).closest('tr').find('input[type="text"]'.val(fileName);