使用 JQuery 获取文件名 [重复]答案

【问题标题】：Using JQuery to grab a file name [duplicate]使用 JQuery 获取文件名 [重复]
【发布时间】：2013-07-09 21:22:08
【问题描述】：

我在我的网络应用程序中使用了自定义文件上传按钮。我希望用户看到他们选择了一个文件，因此我更改了 div 的 html 以显示文件名。

这是我的 jquery：

$("input[type=file]").change(function() {
    var filename = $("input[type=file]").val();
    $("#share-file-name p").html(filename);
});

现在，这很好用，除了输入的值是：

C:\fakepath\photo.jpg

这就是用户所看到的。我只是想让他们看到“photo.jpg”部分。如何使用我的 jquery 去除文件名以外的所有内容？

谢谢！

【问题讨论】：

使用正则表达式
使用字符串操作，而不是 jQuery。
doxdesk.com/img/updates/20091116-so-large.gif
filename.split('\').pop();
以下大多数答案都假定您的所有用户都在 Windows 上。最好的答案是包含适用于所有情况的正则表达式 '/[\/\\]/'。

标签： javascript jquery

【解决方案1】：

这应该可行：

filename = filename.replace(/^.*[\/\\]/, "");

【讨论】：

【解决方案2】：

如果您将完整的文件路径存储在变量filename 中，则可以执行以下操作以仅获取文件名：

filename.substring(filename.lastIndexOf("\"))

正则表达式或 split 命令对于您正在尝试做的事情来说太过分了。

【讨论】：

【解决方案3】：

你可以砍掉最右边“/”左边的任何东西

像这样：

$("input[type=file]").change(function() {
    var filename = $("input[type=file]").val();
    // As pointed out in the comments, this line is required to make it
    // Windows compliant. It's important to handle paths from any OS.
    filename = filename.replace(/^.*[\\\/]/, '');
    $("#share-file-name p").html(filename);
});

【讨论】：

不能在 Windows 上工作，但嘿，它只有 90% 的市场......
@dandavis 您在哪个浏览器中测试它没有工作？这是标准的 JavaScript，应该适用于所有主流浏览器。
不是JS，是倒退的路径符号坏了……
啊，你说的很对。我继续修复它，所以它现在应该可以在任何地方工作。

【解决方案4】：

使用split("/");，然后你会得到一个数组，其中所有元素由 / 分隔，所以最后一个元素将是文件名

var file = filepath.split("/"); file[file.length - 1]

【讨论】：

【解决方案5】：

你可以使用这个正则表达式：

 filnameToDisplay = /([^\\]+.\w+$)/.exec(filename)[0];

无论文件路径的长度或文件名中的字符如何，这都会得到你想要的，除非他们使用我不知道的奇怪扩展名！

【讨论】：