Question

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

我的想法是仅在完成前一个输入后才显示以下输入，但是我会停留在最后一个输入上。

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

但是此代码要求通过必填验证输入。

对其他方法有什么想法吗？

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" />

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

1 个答案: