html - 如何动态更改输入类型文件的标题？

Question

我想实现一种不同类型的输入文件，所以我使用了更改默认文件的 css 和 html 选项。所以我有以下 html 代码:

<div class="fileinputs">&nbsp;
<input type="file" class="file" id="file" name="file" title="There aren't any files chosen yet." style="width:270px;"/>
<div class="fakefile">
<input tyle="button" name="button" value="Choose the file you want (click)" />
</div>
</div>

然后，CSS代码:

div.fileinputs {position: relative;}
div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
             }
input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
           }

一切看起来都很好，当我将鼠标悬停在输入上时，它会显示我用 html 编写的标题。但是我希望它在我选择一个文件后改变，以显示我选择的文件的名称。我怎样才能做到这一点？提前致谢。

Answer 1

试试这段代码:

DEMO

JS:

 $('input').change(function(){
       $(this).attr('title',($(this).val()));
    });