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

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，然后将update 的值设置为input 文件类型的值。类似的东西

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"/>

Answer 2

您可以在可见输入下添加占位符元素：

<p id="file_path"></p>

然后（我在这部分使用jQuery），事件方面：

​$('#file').change
(
    function(e)
    {
        $('#file_path').text(e.target.files[0]);
    }
);​​​