javascript - 隐藏提交按钮，直到通过纯 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>

标签： javascripthtmlwebinput

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>