html - 输入 [type ="file"] 使用 css 检查文件附件是否存在

Question

这不是一个 JS 问题，如果可能的话，只是寻找一个清晰的 css 解决方案。

对于单选按钮或复选框，我们可以使用 :checked 伪类:

input{
  % styles %
}
input:checked{
  % another styles %
}

是否有使用 CSS 检查文件附件是否存在的技巧？

Answer 1

(已更新，由于误解了问题)

可以使用 required 属性检查文件是否已附加。

参见:http://jsfiddle.net/1ua59jt1/1/

HTML:

<input id="file" type="file" name="fileselect" required="required" />

CSS:

#file:valid { color: green; }
#file:invalid { color: red; }

但是如果以这种方式选择了“正确”的文件，您永远无法真正验证。您只能检查文件是否被选中。

---

//完成更新:

required 属性是 HTML5。请注意，并非所有浏览器都支持此功能:http://www.w3schools.com/tags/att_input_required.asp

这意味着客户端验证唯一值得信赖的方式是使用 javascript。如果您想这样做，我建议您在表单上使用 novalidate 属性来禁用浏览器的默认验证 ( http://www.w3schools.com/tags/att_form_novalidate.asp)。

但也始终使用服务器端验证。您永远无法确保用户启用了 jaavscript 或没有操作 javascript。因此，最好的方法始终是在您完全控制的一侧验证值:服务器，即表单将其数据发送到的操作。