Question

我有一个简单的HTML文档，其中包含以下代码：

<form method="post" action="/upload_file" enctype="multipart/form-data" id = "fileForm">
    <button id="chooseFileButton">
        Choose File
        <input id="fileInput" type="file" name="file" accept="application/vnd.ms-excel"/>
    </button>
    <button id="uploadFileButton" type="submit">Upload File</button>
</form>

<style>
#fileInput {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
}
</style>

所以这里的文件输入是隐藏的，位于按钮内部。现在在谷歌浏览器中，当我单击按钮时，它会打开我想要的文件对话框。但在Firefox中，它尝试导航到表单的action属性中的URL。我如何让Firefox像Chrome一样使用我的HTML？ Firefox的行为是什么原因？

Answer 1

这是因为你要做的事实上并不是有效的HTML。为什么不让fileinput看起来像带有div的按钮？

不允许在Button Tag中包含fileinput

像这样：

.buttonExample {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

<div class="buttonExample">Upload button
    <input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input></div>

为什么在按钮内输入文件在Firefox中不起作用但在Chrome中有效？

1 个答案: