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

Question

我有一个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;" />

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

我如何实现这一目标？

谢谢。

Answer 1

为您的<a>

添加ID

并且做：

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

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

Answer 2

这样的事可能吗？

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

Answer 3

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