我有一个带有以下代码的简单 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>
所以这里的文件输入是隐藏的并且在按钮内。现在在 Google Chrome 中，当我单击按钮时，它会根据需要打开文件对话框。但是在 Firefox 中，它会尝试导航到表单的 action 属性中的 URL。如何让 Firefox 像 Chrome 一样处理我的 HTML？Firefox 出现这种行为的原因是什么？
这是因为您尝试做的实际上并不是有效的 HTML。为什么不让文件输入看起来像一个带有 div 的按钮？
不允许在 Button 标签中包含文件输入
像这样：
.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句