Question

我有一个与文件输入相关的输入按钮，因此当单击按钮时，将触发文件输入功能。因此，该按钮在知道文件输入已隐藏的情况下用作上载按钮。选择文件后，按钮具有文本值，并且按钮将所选文件的名称作为新的文本值。

我的问题是，当未选择文件时，如何使上传按钮在文件上传文本字段上强制执行必需属性选项。

<form action="." method="POST">
    <input type="file" class="file-upload" style="display: none;">
    <button type="button" class="file-button">Upload File</button>
    <input required type="text" placeholder="type here">
    <input type="submit" value="Submit" id="go_button" class="button">
</form>

<script>
    const fileUpload = document.querySelector('.file-upload')
    const fileButton = document.querySelector('.file-button')

    // This function for the Upload file
    fileButton.addEventListener("click", function(){
        fileUpload.click()
    })

    fileUpload.addEventListener("change", function(){
        if (fileUpload.value){
            fileButton.innerHTML = fileUpload.value
        } else {
            fileButton.innerHTML = "Upload File"
        }
    })
</script>

Answer 1

您可以捕获提交事件并检查上传的值

const form = document.querySelector('form');

form.onsubmit = function(event) {
  if (!fileUpload.value) {
    alert('Please select a file');
    event.preventDefault();
  }
}

Codepen example

Answer 2

让我澄清一下，您希望在单击“上传”按钮时就像在单击“提交”按钮时一样在输入字段上强制执行必需的选项。

默认情况下，只有输入和类型为submit的按钮才能在文本输入字段上强制使用必需的选项。如果您希望在上传按钮上强制使用必需的选项，而无需使用javascript ，则必须为其指定一种submit类型，

<form action="." method="POST">
    <input type="file" class="file-upload" style="display: none;">
    <button type="submit" class="file-button">Upload File</button>
    <input required type="text" placeholder="type here">
    <input type="submit" value="Submit" id="go_button" class="button">
</form>

您可以看到它在jsfiddle here上运行。

如果这样做，您现在将有两个按钮来提交表单，并且这两个按钮都要求在提交之前填写文本输入。

确保仅一个按钮提交表单的一种方法是使文件上传异步并防止上载按钮的默认提交行为，同时仍在关联的文本字段上强制执行必需的选项。

创建一个输入按钮以在输入文本字段上强制执行必需的属性选项

2 个答案: