仅当上一个文件输入不为空时显示文件输入

Question

如何获得单击第三个输入字段后显示的最后一个输入字段，因为我只能显示 3 个输入？

我的想法是仅在满足前一个输入后才显示以下输入，但我被困在最后一个输入上。

我要求只需要第一个输入，因为我的网站上只需要 1 张图片，但用户可以上传更多。

但此代码要求通过 required 验证输入。

对另一种方法有什么想法吗？

input {
display: block
}
#csvfile {
display: none
}
#filename2 {
display: none
}
#csvfile2 {
display: none
}
#filename:valid+#csvfile {
display: block
}
#csvfile:valid+#filename2 {
display: block
}
#filename2:valid+#cvsfile2 {
display: block
}

<input type="file" id="filename" required name="filename" />
<input type="file" id="csvfile" required name="csvfile" />
<input type="file" id="filename2" required name="filename2" />
<input type="file" id="csvfile2" name="csvfile2" />

Answer 1

由于您不希望所有文件输入都是必需的，因此您将无法仅使用 css 可靠地检测它们是否为空(您使用的 ：valid 伪类仅适用于必填字段(。您将需要一些 JavaScript 来检测每个文件输入是否包含一个文件。下面是一个示例：

const elems = document.querySelectorAll('input[type="file"]');
for (let elem of elems) {
elem.addEventListener('change', (event) => {
let target = event.target;
let next = target.nextElementSibling;
if (target.files.length) {
next.classList.remove('hidden');
} else {
next.classList.add('hidden');
}
});
}

.hidden {
display: none;
}

<input id="filename" type="file" name="filename" required />
<input class="hidden" id="csvfile" type="file" name="csvfile" />
<input class="hidden" id="filename2" type="file" name="filename2" />
<input class="hidden" id="csvfile2" type="file" name="csvfile2" />