Question

我知道样式文件输入非常小，这不是一件坏事。

有没有办法选择空的文件输入？

计划是根据文件输入是否为空来显示或隐藏提交按钮。

Answer 1

如果您愿意将input标记为required，you could do it with just css：

＆＃13;

input:invalid ~ .chosen {
    display: none;
}
input:valid ~ .empty {
    display: none;
}

＆＃13;

<input type="file" required><br>

<span class="empty">Empty</span>
<span class="chosen">Chosen</span>

＆＃13;

Answer 2

有没有办法选择空的文件输入？

没有

您需要JavaScript。你可以在SO和其他地方找到几个答案。基本的想法是观察change事件的元素，添加一个类，如non-empty表示选择了文件，然后添加样式input[type="file"].non-empty + label，假设您使用的是label {1}}作为替换文件输入按钮。您必须使用特殊情况form.reset()清空表单中的文件输入，但不会在输入上触发change事件。这是一些示例代码（没有form.reset部分）：

＆＃13;

// Add a class to a file input if it's not empty.
function mark() { this.classList.toggle('non-empty', this.files.length); }

// Watch a file input and update non-empty status.
function watch(input) { input.addEventListener('change', mark); }

// Get all file inputs.
const inputs = Array.from(document.querySelectorAll('input[type=file]'));

// Watch all file inputs in the whole document.
inputs . forEach(watch);

＆＃13;

input[type="file"]                          { width: 0.1px; height: 0.1px; }
input[type="file"].non-empty + label        { color: green; }
input[type="file"].non-empty + label::after { content: ' (specified)'; }

＆＃13;

<input type="file" id="input">
<label for="input">Specify file</label>

＆＃13;

用于空文件输入的CSS选择器

2 个答案: