。
答案: 隐藏提交按钮,直到通过纯JavaScript选择了文件,可以通过以下步骤实现:
<input type="file" id="fileInput">
<button id="submitButton" style="display: none;">提交</button>
const fileInput = document.getElementById('fileInput');
const submitButton = document.getElementById('submitButton');
fileInput.addEventListener('change', function() {
if (fileInput.files.length > 0) {
submitButton.style.display = 'block';
} else {
submitButton.style.display = 'none';
}
});
在上述代码中,我们首先获取文件选择输入框和提交按钮的引用。然后,我们使用addEventListener方法来监听文件选择输入框的change事件。当文件选择输入框的值发生变化时,会触发change事件。在事件处理程序中,我们检查文件选择输入框的files属性的长度是否大于0。如果大于0,表示已选择了文件,我们将提交按钮的display属性设置为'block',使其显示出来。否则,将提交按钮的display属性设置为'none',使其隐藏起来。
这样,当用户选择了文件后,提交按钮会显示出来,用户可以点击提交按钮来执行相应的操作。
这种技术可以应用于需要用户选择文件后才能进行下一步操作的场景,例如文件上传、表单提交等。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云