javascript - 当用户选择他/她的文件时更改文件输入按钮的文本

Question

我有这个文件输入:

<input id="some_file_input" type="file"  name="some_file" class="custom-input-thing" data-buttonName="btn-primary" data-icon="true">

我隐藏按钮附带的文本，即“未选择文件”的文本，只是因为“外观”:

input[type=file] {
color: transparent; 
display: block; 

有没有办法在用户选择要上传的文件时更改文件输入的文本？？

在此先感谢您的帮助。

Answer 1

为此使用inputFileText 插件

https://github.com/datchung/jquery.inputFileText

在 jQuery 之后加载这个文件

<script src='jquery-input-file-text.js'></script>

这是您的 jQuery 代码。

$("input[type=file]").on("change", function() {
    $(this).inputFileText( { text: 'Uploaded' } );
});

如果文件被更新，input[type=file] 的值将会改变。我们使用 change 事件处理程序。然后我们包含用于更改文本的插件功能。