jQuery - 检测文件输入中是否已选择文件

Big*_*ies 202 jquery

可能重复:
jQuery:从<input type ="file"/>中获取文件名

我有一个标准的文件输入框

<input type="file" name="imafile">
Run Code Online (Sandbox Code Playgroud)

我也在页面上有一些文字

<span class="filename">Nothing selected</span>
Run Code Online (Sandbox Code Playgroud)

我想知道是否可以使用文件输入框中选择的文件名更新文本?

干杯,

Cla*_*ton 304

您应该能够将事件处理程序附加到输入的onchange事件,并使该函数调用一个函数来设置跨度中的文本.

<script type="text/javascript">
  $(function() {
     $("input:file").change(function (){
       var fileName = $(this).val();
       $(".filename").html(fileName);
     });
  });
</script>
Run Code Online (Sandbox Code Playgroud)

您可能希望在输入和范围中添加ID,以便根据您所关注的元素进行选择,而不是DOM中的其他文件输入或跨度.

  • 如果再次选择相同的文件,则不会调用`onchange`.我怎么能克服这个......? (40认同)
  • @shashwat绑定到输入的click事件,并将输入值设置为null. (11认同)
  • @shashwat 你可以在每次使用后添加 `$(this).val('');` (3认同)
  • @shashwat您可以使用 live 而不是 change 来解决这个问题。示例:将代码从 $("input:file").change 更改为 $("input:file").live (2认同)

Jam*_*ury 11

我建议尝试改变事件?测试它是否有值,如果它有,那么你可以继续你的代码.jQuery有

.bind("change", function(){ ... });
Run Code Online (Sandbox Code Playgroud)

要么

.change(function(){ ... }); 
Run Code Online (Sandbox Code Playgroud)

这是等价的.

http://api.jquery.com/change/

对于唯一选择器,将您的name属性更改为id,然后jQuery("#imafile")jQuery('input[type="file"]')所有文件输入更改为general

  • 对我们更好`on(`,...``bind(`不推荐使用 (4认同)