在选择文件之前禁用 freemarker/spring 表单上的提交按钮

Question

在用户选择文件之前如何禁用提交按钮？

我的页面上有一个表单：

<table>
    <form method="post" enctype="multipart/form-data" id="messageupload">
    <@spring.bind "messageUploadCommand.*"/>
        <tr>
            <td><@spring.formInput 'messageUploadCommand.multipartFile' '' 'file' /></td>
            <td><button type="submit" id="searchButton">Upload</button></td>
            <td><@spring.formSingleSelect 
                    'messageUploadCommand.messageFormat', 
                    messageFormats, '' /> 
                <@spring.showErrors  '<br>', 'error' /> </td>
        </tr>
    </form>
</table>

如果用户在选择文件之前提交表单，我会得到

freemarker.template.TemplateException: Error executing macro: formSingleSelect required parameter: options is not specified. 
 at freemarker.core.Macro$Context.sanityCheck(Macro.java:211) 
 at freemarker.core.Macro$Context.runMacro(Macro.java:169) 
 at freemarker.core.Environment.visit(Environment.java:603) 
 at freemarker.core.UnifiedCall.accept(UnifiedCall.java:106) 
 at freemarker.core.Environment.visit(Environment.java:210) 
 at freemarker.core.MixedContent.accept(MixedContent.java:92) 
 at freemarker.core.Environment.visit(Environment.java:210)
 at freemarker.core.Environment.process(Environment.java:190)
 at freemarker.template.Template.process(Template.java:237)
 at ...

Answer 1

我就是这样做的：

<table>
    <form method="post" enctype="multipart/form-data" id="messageupload">
    <@spring.bind "messageUploadCommand.*"/>
        <tr>
            <#assign onChangeScript = "document.getElementById('uploadButton').disabled = (value.length=0); ">
            <td><@spring.formInput 'messageUploadCommand.multipartFile' 'onchange=\"${onChangeScript}\"' 'file' /></td>
            <td><button type="submit" disabled="true"
                          id="searchButton">Upload</button></td>

            <td><@spring.formSingleSelect 
                    'messageUploadCommand.messageFormat', 
                    messageFormats, '' /> 
                <@spring.showErrors  '<br>', 'error' /> </td>
        </tr>
    </form>
</table>

我通过 Freemarker 变量添加了文件选择器 onchange 脚本，并默认禁用该按钮。 onchange 脚本测试值的长度（即文件名）是否为零。