jQuery - 检测文件输入中是否已选择文件[重复]答案

【问题标题】：jQuery - Detecting if a file has been selected in the file input [duplicate]jQuery - 检测文件输入中是否已选择文件[重复]
【发布时间】：2011-04-14 23:13:32
【问题描述】：

可能重复：
jQuery: get the file name selected from <input type=“file” />

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

<input type="file" name="imafile">

我也有一些类似这样的文字

<span class="filename">Nothing selected</span>

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

干杯，

【问题讨论】：

@jnpcl - 我不认为那个帖子和我想做的事情一样
它显示<input type="file">字段的filename。这不是正是您想要做的吗？
他希望在用户选择一个文件时触发一个事件。这与在您知道文件被选中后获取名称截然不同。因此，这不是重复的。

标签： jquery

【解决方案1】：

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

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

您可能希望将 ID 添加到您的输入和跨度，以便您可以根据特定于您关注的元素而不是 DOM 中的其他文件输入或跨度进行选择。

【讨论】：

如果再次选择相同的文件，则不会调用 onchange。我该如何克服这个..？
@shashwat 您可以使用 live 而不是 change 来克服这个问题。示例：将代码从 $("input:file").change 更改为 $("input:file").live
@shashwat 绑定到输入的点击事件，并将输入值设置为空。
@BlakePlumb，我不相信您能够更新输入的值，因为上传输入是只读的（除了用户从对话框中选择的内容）。如果我错了，请纠正我。
@shashwat 你可以在每次使用后添加$(this).val('');

【解决方案2】：

我建议尝试更改事件？测试它是否有一个值，如果有，那么你可以继续你的代码。 jQuery 有

.bind("change", function(){ ... });

或者

.change(function(){ ... });

它们是等价物。

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

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

【讨论】：

对我们更好on(, ......bind( 已弃用