＆＃34;对于＆＃34; Firefox

Question

我想通过将文本更改为＆＃34;选择文件来自定义输入元素...＆＃34;并隐藏文件的名称。此外，如果用户单击该按钮，则打开一个窗口供用户选择文件。代码是

<button>
 <label for="upload"> Choose file ... </label>
</button>
<input type="file" id="upload" style="display:none">

使用Chrome，如果我点击该按钮，会弹出一个窗口供我选择该文件。但它并不适用于Firefox和IE。你知道我怎么能让它适用于所有三种浏览器？谢谢。

Answer 1

label标记不适用于按钮。它基本上与单选按钮一起使用。以下应该做你想要的：

<button id="btnFile" onclick="upload.click();">
  Choose file ...
</button>
<input type="file" id="upload" style="display:none">

Answer 2

您的HTML无效。标签不能是按钮的后代。

删除按钮：

<label for="upload"> Choose file ... </label>
<input type="file" id="upload" style="display:none">

（在Firefox中测试过。我手边没有IE的副本。）

如果你想要一些看起来的东西，就像一个按钮一样，那么用CSS调整它的样式。