Question

所以，我试图让我的文件上传输入看起来比默认按钮好一点。一切顺利，但是，我似乎无法找到一个可以做我想做的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的新手。

Answer 1

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

＆＃13;

$('input').change(function() {
  $(this).next('label').text($(this).val());
})

＆＃13;

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

＆＃13;

如果您想要隐藏默认的file输入文字，可以在CSS DEMO中使用color: transparent

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

1 个答案: