Question

我一直在努力弄清楚如何在HTML表单中自定义文件输入的外观，以便该按钮与我网站上的其他按钮匹配。环顾四周，我找到了一个我期望工作的解决方案，但它有一些奇怪的行为。

我接受了我的文件输入并设置了display：none，并在表单中创建了一个新的文本输入和按钮。

            <form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()">
                <input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" />
                <div id="invalidTitle" class="invalidData"></div>
                <p id="char-remaining">(50 characters remaining)</p>

                <input type="file" id="ImageFile" name="ImageFile" style="display:none;" />
                <input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" />
                <button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button>
                <div id="invalidImage" class="invalidData"></div>
                <p id="file-desc">(image to represent your entry, jpg, png, or gif)</p>

                <textarea id="EntryDesc" name="EntryDesc"></textarea>
                <div id="invalidDesc" class="invalidData"></div>
                <br />

                <input type="checkbox" id="isPrivate" name="isPrivate" value="true" />
                <input type="hidden" name="isPrivate" value="false" />
                Make my entry private.

                <button id="new-entry-save">save</button>
            </form>

然后我的javascript来处理被点击的ImageFileButton按钮：

function HandleFileButtonClick() {
    document.getElementById("ImageFile").click();
    document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value;
}

似乎工作正常。我点击按钮，弹出窗口供我选择文件。当我选择一个文件时，它会出现在文本框中。

当我点击表单上的“保存”按钮时，出现了奇怪的行为。我注意到它必须被点击两次以实际提交现在的某些原因。并且，当它提交时，它不再发布文件。

所以我再次看到文件输入，看看发生了什么。如果我使用ImageFileButton按钮选择文件，文件将显示在文件输入中。但是，单击“保存”时，文件输入将清除，表单不会提交。然后你必须再次点击提交，当然现在没有文件。

有人知道这里发生了什么吗？

Answer 1

不，不可能。文件输入通常取决于浏览器。您可能必须使用JavaScript替换或Flash替换，如uploadify。

文章：Input File

在所有表单字段中，文件上载字段在样式方面是最差的。资源管理器Windows提供了一些（但不是很多）样式的可能性，Mozilla稍微少一些，而其他浏览器则没有。特别是“浏览”按钮是CSS操作完全无法访问的。

自定义HTML表单中文件输入的外观

1 个答案: