当选择文件时更改标签内容jQuery

When File Selected Change Label Contents jQuery

本文关键字：标签 jQuery 选择 文件      更新时间：2023-09-26

所以，我试图让我的文件上传输入看起来比默认按钮好一点。一切都很顺利，然而，我似乎找不到一个jQuery脚本可以做我想做的事情。

我想做的是，当一个文件没有被选中时，我希望标签显示"选择一个头像"，但当选择一个文件时，我想它显示文件名，即："example.png"而不是"选择头像"。

这是我的HTML:

<form action="" method="post" class="avatar-form-form" enctype="multipart/form-data">
    <input id="avatar-file" type="file" name="avatar">
    <label for="avatar-file">Choose An Avatar</label>
</form>

此外，如果用户选择了多个文件，我希望它说"选择了太多文件"

感谢所有的帮助，因为我是jQuery的新手。

您可以将标签的text()设置为输入的val，对于多个文件，您必须使用multiple

$('input').change(function() {
  $(this).next('label').text($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="avatar-form-form" enctype="multipart/form-data">
  <input id="avatar-file" type="file" name="avatar">
  <label for="avatar-file">Choose An Avatar</label>
</form>

如果您想隐藏默认的file输入的文本，可以在CSS中使用color: transparentDEMO

相关文章：