带有 JS 的样式输入文件按钮 - 选择文件后更改文本答案

【问题标题】：style input file button with JS - change text after file chosen带有 JS 的样式输入文件按钮 - 选择文件后更改文本
【发布时间】：2013-05-07 17:53:26
【问题描述】：

我隐藏了一个 HTML 输入，因为我不喜欢看到“选择文件”。

http://jsfiddle.net/tPTxJ/

代码：

 <a href="#" onclick="document.getElementById('userFile').click(); return false;" />Upload Picture</a>

 <input type="file" id="userFile" name = "userFile" type="file" value="Snap Picture"  style="visibility: hidden;" />

一旦选择了图片文件，我正在尝试将我的文字“上传图片”更改为“图片上传”。

我如何做到这一点？

谢谢。

【问题讨论】：

标签： javascript html input types styles

【解决方案1】：

可能是这样的吗？

document.getElementById('userFile').addEventListener("change", function() {
  document.getElementById('uploadLink').innerHTML = "Uploaded.";
});

【讨论】：

【解决方案2】：

给你的<a>添加一个ID

然后做：

onchange=" document.getElementById('a').innerHTML = 'Picture Uploaded';"

看：http://jsfiddle.net/tPTxJ/3/

【讨论】：

【解决方案3】：

将"onchange" 处理程序附加到您的文件输入元素，它会更改锚点的文本。

【讨论】：

对颜色有用，但我需要改变文字。
不知道你在说什么。 onchange 会在文件被选中时告诉你。然后，您可以使用一些简单的 javascript 来更改锚点的文本。