javascript - 捕获并显示隐藏输入中的文本

Question

我使用this solution更改 <input type="file" />. 的按钮文本它可以工作，但它有一个小缺点 - 选择文件后，用户将看不到选择的文件，因为此信息不会显示(它被原始按钮隐藏)。如何使这些信息可见而不显示原始(隐藏)按钮？

代码:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

Answer 1

您可以创建一个不包含文本的span，然后将其值更新为您的输入文件类型的值。类似的东西

function showFileName(){
document.getElementById("fileName").innerHTML = document.getElementById("file").files[0].name

}

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<span id="fileName"></span>
<input type="file" onChange="showFileName()" style="display:none;" id="file" name="file"/>