如何使用 jQuery 从文件输入中捕获文件名？答案

【问题标题】：How to capture the filename from a file input using jQuery?如何使用 jQuery 从文件输入中捕获文件名？
【发布时间】：2011-06-08 01:19:59
【问题描述】：

我有一个带有文件输入控件的表单：

<input type="file" onclick="this.blur()" name="descFile" />

因此，当用户选择文件时，路径会显示在文本输入框中（默认浏览器行为），但是，企业希望我在下方用粗体字母显示他们已选择要上传的文件的消息， 回发之前。

有没有办法使用 Javascript 以某种方式从文件输入中捕获“选择”事件并在文件输入下方以粗体显示？

【问题讨论】：

您要捕获文件名，还是仅捕获他选择了文件的事实？
只是他们选择了一个文件。这很奇怪，因为我认为浏览器控件足够直观，但我想我们的用户需要更多指示。

标签： jquery html file file-upload

【解决方案1】：

$('input[name="descFile"]').change(function(){
   var filename = $(this).val();
   $('<label>Filename selected: '+ filename +'</label>').insertAfter($(this));
});

记得放在里面或者类似：

$(function(){ });

【讨论】：

谢谢，效果很好。不知道为什么用户需要更多的指示，但事情就是这样。 :)

【解决方案2】：

可以这样完成

$('input[type=file]').val()

无论如何，我建议使用名称或 ID 属性来选择您的输入。加上事件，它应该是这样的：

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});

【讨论】：

你应该感谢最初写这篇文章的人：stackoverflow.com/questions/1299052/…

【解决方案3】：

如果我理解您的问题，这是您输入标签的 value 属性。

$('#file_attach').change(function(){

        path=$(this).attr('value');
        start = path.lastIndexOf(".");
        alert("extention: "+start);
});

【讨论】：