使用jQuery获取文件输入的选定文件名（不包括路径）

Question

我用了这个:

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

如何仅获取文件名（filename.doc）？当我尝试获取所选的文件名时，实际返回的是完整路径，例如"C:\fakepath\filename.doc"。"fakepath"部分确实存在 - 不确定是否应该存在，但这是我第一次使用文件上传的文件名。

- marky

---

浏览器将真实路径更改为C:\fakepath\，以防恶意网站使用Javascript来获取有关计算机目录结构的信息。 - drudge

Answer 1

var filename = $('input[type=file]').val().split('\\').pop();

或者你可以直接这样做（因为出于安全原因，始终会添加 C:\fakepath ）:

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')

- manji

---

正是我所需要的，万岁！我还需要检查扩展名，所以我用了你的例子这样写：var extension = filename.split('.').pop(); 以获取它！谢谢！ - marky

我已经在Windows 7、Ubuntu 11.04和Mac OS X上测试了split('\').pop()，在所有系统上都可以正常工作。 - Alex

@Alex：哇，那真的很疯狂。那么这只是为了解决过去某人的糟糕JS代码而采取的变通方法，这个问题永远不会得到修复。我在Mac上运行Safari，看到里面有“C：\ fakepath \”。（可在jsfiddle中尝试一下。） - Mike DeSimone

请记住，如果您使用第一个片段（在“\”上分割），则如果文件名中有“\”，它将会出错。由于它应始终以“C:\fakepath”开头，因此我认为第二个选项更可靠。 - Vitor Baptista

@VítorBaptista Windows文件名中不能包含反斜杠。虽然在MacOS上是可能的，但正如苹果公司的网站所述，"您应该避免在文件和文件夹名称中使用冒号和斜杠，因为某些操作系统和驱动器格式使用这些字符作为目录分隔符"。 - joao.arruda

Answer 2

您只需要执行以下代码。第一个 [0] 是用于访问 HTML 元素，第二个 [0] 是用于访问文件上传的第一个文件（我包含了一项验证以防没有文件）：

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";

- Diego Cotini

---

在使用此选项时需要考虑一件事情：当您再次单击“选择文件”按钮以打开文件窗口，然后单击“Esc”键时，将会抛出控制台错误。 - luke_mclachlan

是的，你说得对，但我的意图是只放置代码以获取名称，因为代码从硬编码位置获取名称，所以需要检查是否有文件（在这种情况下，我们只谈论一个文件，但可能有更多文件，代码需要迭代所有元素）。但当然，我会更新代码并包括此验证。 - Diego Cotini

Answer 3

获取适用于所有操作系统的路径

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

示例

C:\fakepath\filename.doc 
/var/fakepath/filename.doc

两者都返回

filename.doc
filename.doc

- Kotzilla

---

示例代码var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');正在使用jQuery。 - Zarepheth

@Zarepheth 我认为我们可以在使用其他库时应用类似的模式。 - Ender

Answer 4

为了安全原因，Chrome返回 C:\fakepath\... ，这样网站就无法获取有关您计算机上文件路径等信息。

要获取字符串中的文件名部分，可以使用split()方法...

var file = path.split('\\').pop();

jsFiddle链接。

...或者一个正则表达式...

var file = path.match(/\\([^\\]+)$/)[1];

jsFiddle。

...或者lastIndexOf()...

var file = path.substr(path.lastIndexOf('\\') + 1);

jsFiddle。

- alex

Answer 5

这是我做的方法，效果非常好。

在你的HTML中进行如下操作：

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

然后在您的JS文件中创建一个简单的函数：

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

如果你正在处理多个文件，你也可以通过循环来获取列表：

e.target.files[0].name

- bartlss

---

由于在此上下文中字段ID无效，JS中的函数应该少一个参数，只需使用e而不是fileSelect(id,e)，只需使用fileSelect(e)。感谢您提供的解决方案 :)。 - Jasper Lankhorst

Answer 6

也许可以补充一些内容以避免使用虚假路径：

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);

- vafrcor

Answer 7

这个替代方案似乎是最合适的。

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});

- Fischer Tirado

Answer 8

这个怎么样？

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);

- Bertrand Marron

Answer 9

是否必须使用jQuery？或者您可以只使用JavaScript的本地代码yourpath.split("\\")将字符串拆分为数组吗？

- GolezTrol

Answer 10

<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(\/|\\)/, '');
        // .. do your magic

        $('#filename').html(filename);
    });
</script>

- real vishal