隐藏提交按钮，直到通过纯JavaScript选择文件为止

Question

我只想在选择文件后显示提交按钮。我可以用jQuery来做这件事，但我没有在页面的任何部分使用jQuery，所以为了避免一些空格，我需要通过纯JavaScript来完成。

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="pimage"/> 
<input type="submit" name="submit" value="Confirm">
</form>

Answer 1

const form = document.querySelector('form');
const submitButton = form.querySelector('[type="submit"]');
const inputFile = form.querySelector('[type="file"]');
inputFile.addEventListener('change', () => {
submitButton.style.display = inputFile.files.length ? '' : 'none';
});

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="pimage"/> 
<input type="submit" name="submit" value="Confirm" style="display: none">
</form>