如何隐藏表单中的文件输入项？答案

【问题标题】：How to hide a file input item in a form?如何隐藏表单中的文件输入项？
【发布时间】：2012-09-28 15:38:47
【问题描述】：

我正在开发一个让用户上传字体文件的网页，但要求是在用户选择文件后显示字体名称，然后他可以决定是否上传，字体名称是一个属性字体文件，文件名可能是“123.ttf”，但是当你右键单击字体文件并查看它的“标题”preperty时，它被称为“ACME Explosive Bold”，所以我的Javascript应该理想地找到“tilte” "这个字体的属性，但是经过大量研究，我被告知JS无法获取该属性，而另一方面我找到了一段可以获取它的Java代码。

所以现在我试图在页面上隐藏第二个表单，输入字段的值将是用户从第一个表单中选择的文件，当用户选择一个文件但在他点击第一个表单的提交按钮之前，我的 JS 使用用户选择的文件调用第二个表单，提交并运行一个 servlet 以找到它的“标题”并返回并将其显示在页面上，然后在服务器上删除该文件，因为用户从未正式提交过。

所以我的问题是如何用它自己的输入文件字段和页面上的浏览按钮隐藏这个第二个表单，我需要表单标签，这样我就可以模拟提交。但我不想让用户看到它？

到目前为止，这是我的代码：

![<div class="body">
    <h1>Upload Font</h1>                                                       <%-- \[+\] --%>
    <s:form namespace="/font" action="add" method="POST" enctype="multipart/form-data">
        <div class="dialog">
            <table>
                <tbody>
                    <tiles:insertAttribute name="form" />
                    <tr class="prop">
                        <td valign="top" class="name required">
                            <label for="description">Font File:</label>
                        </td>
                        <td valign="top">
                            <s:file name="file" size="62" theme="simple" id="fname" onchange="fileUpload('/pages/font/getFontTitle.jsp',value,this.files\[0\])"/>
                        </td>
                    </tr> 
                    <tr class="prop">
                        <td>
                            <span class="button"><s:submit/></span>
                        </td>
                    </tr> 
                </tbody>
            </table>
        </div> 
    </s:form>
    <s:form namespace="/font" action="hiddenForm" method="POST" enctype="multipart/form-data">
        <div class="dialog">
            <table>
                <tbody>
                    <tr class="prop">
                        <td valign="top">
                            <s:file name="file" size="62" theme="simple" id="fname_1"/>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div> 
    </s:form>
</div>]

【问题讨论】：

标签： javascript file input

【解决方案1】：

您可以使用 CSS 属性可见性隐藏第二个表单：隐藏。

<s:form namespace="/font" style ='visibility:hidden' action="hiddenForm" method="POST" enctype="multipart/form-data">

【讨论】：

使用display: none 而不是visibility: hidden，这样它就不会占用页面空间。