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

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

在所有表单字段中，文件上传字段在样式方面是迄今为止最差的。 Explorer Windows 提供了一些（但不是很多）风格的可能性，Mozilla 稍微少一些，而其他浏览器则根本没有。尤其是“浏览”按钮，CSS 操作完全无法访问。