如何使用JavaScript从完整路径获取文件名？

310

有没有办法从完整路径中获取最后一个值（基于'\'符号）？

例：

C:\Documents and Settings\img\recycled log.jpg

对于这种情况，我只想了解recycled log.jpgJavaScript的完整路径。

javascript 
— 金勇
source

Answers:

696 
var filename = fullPath.replace(/^.*[\\\/]/, '')

这将处理路径中的\ OR /

— 尼克
source
4
在使用chrome的MAC OSX上不起作用，它会在\之后转义字符
— Pankaj Phartiyal
7
根据这个网站，使用replace是多慢substr，可以在结合使用lastIndexOf('/')+1：jsperf.com/replace-vs-substring
— 内特
1
@nickf尼克，不确定我要去哪里哪里，但是当文件路径使用单斜杠时，代码对我不起作用。Fiddle，尽管对于`\\`来说也可以。
— Shubh 2014年
1
我只是在控制台上运行了它，它非常适合正斜杠："/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '')返回moo.js
— vikkee
1
@ZloySmiertniy有几个不错的在线正则表达式解释器。rick.measham.id.au/paste/explain.pl?regex=%2F%5E。*％5B％5C％5C％5C％2F％5D％2F和regexper.com/#%2F%5E。*％5B ％5C％5C％5C％2F％5D％2F应该会有所帮助。（链接在这里断开了，但是将其复制粘贴到选项卡中就可以了）
— nickf
115

为了性能起见，我测试了此处给出的所有答案：

var substringTest = function (str) {
    return str.substring(str.lastIndexOf('/')+1);
}

var replaceTest = function (str) {
    return str.replace(/^.*(\\|\/|\:)/, '');
}

var execTest = function (str) {
    return /([^\\]+)$/.exec(str)[1];
}

var splitTest = function (str) {
    return str.split('\\').pop().split('/').pop();
}

substringTest took   0.09508600000000023ms
replaceTest   took   0.049203000000000004ms
execTest      took   0.04859899999999939ms
splitTest     took   0.02505500000000005ms

而得奖者是Split and Pop风格的答案，这要感谢bobince！

— 丹培
source
4
根据元讨论，请在其他答案中添加适当的引文。更好地解释您如何分析运行时也将很有帮助。
— jpmc26 2016年
也可以随意对该版本进行基准测试。应该同时支持Mac和Windows文件路径。path.split(/.*[\/|\\]/)[1];
— tfmontague '17
2
测试不正确。substringTest仅搜索正斜杠，execTest-仅搜索反斜杠，而其余两个则同时搜索两个斜杠。与实际结果无关（不再）。看看这个：jsperf.com/name-from-path
— Grief
@Grief该链接不再有效。
— paqogomez，
88

在Node.js中，您可以使用Path的parse模块 ...

var path = require('path');
var file = '/home/user/dir/file.txt';

var filename = path.parse(file).base;
//=> 'file.txt'
— 罗伯·罗奇
source
14
如果使用Node.js，则可以使用以下basename功能：path.basename(file)
— electrovir
66

路径来自什么平台？Windows路径不同于POSIX路径不同于Mac OS 9路径不同于RISC OS路径...

如果这是一个Web应用程序，文件名可以来自不同的平台，则没有一种解决方案。但是，合理的选择是同时使用'\'（Windows）和'/'（Linux / Unix / Mac，以及Windows上的替代名称）作为路径分隔符。这是非RegExp版本，可带来更多乐趣：

var leafname= pathname.split('\\').pop().split('/').pop();
— 博宾斯
source
您可能要添加经典的MacOS（<= 9）使用冒号分隔符（:)，但我不知道任何仍在使用的浏览器没有将MacOS路径转换为文件形式的MacOS路径：///path/to/file.ext
— 2009年
4
您可以只使用pop（）而不是rev​​erse（）[0]。它也可以修改原始数组，但是在您的情况下还可以。
— Chetan Sastry，2009年
我想知道我们如何创建一个对应的路径。
— 托德·霍斯特
就像 var path = '\\Dir2\\Sub1\\SubSub1'; //path = '/Dir2/Sub1/SubSub1'; path = path.split('\\').length > 1 ? path.split('\\').slice(0, -1).join('\\') : path; path = path.split('/').length > 1 ? path.split('/').slice(0, -1).join('/') : path; console.log(path);
— Todd Horst 2014年
命名“ 叶名”从目录/文件结构名字“树”衍生的第一件事树是根，最后是树叶 =>文件名中的最后一件事树路径=> 叶 :-)
— 安装插件。网路
29

Ates，您的解决方案无法防止输入空字符串。在这种情况下，它将失败TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties。

bobince，这是nickf的一个版本，可以处理DOS，POSIX和HFS路径定界符（以及空字符串）：

return fullPath.replace(/^.*(\\|\/|\:)/, '');
— 用户129661
source
4
如果我们使用PHP编写此JS代码，则需要为每个\添加一个额外的\
— 列宁·拉杰·拉贾塞卡兰（Linin Raj Rajasekaran），
17

以下JavaScript代码行将为您提供文件名。

var z = location.pathname.substring(location.pathname.lastIndexOf('/')+1);
alert(z);
— Epperlyg
source
8

询问“获取不带扩展名的文件名”的问题是在这里，但没有解决方案。这是Bobbie解决方案修改后的解决方案。

var name_without_ext = (file_name.split('\\').pop().split('/').pop().split('.'))[0];
— 雷蒙·辛
source
6

另一个

var filename = fullPath.split(/[\\\/]/).pop();

这里split具有一个带有字符类
的正则表达式两个字符必须用'\'进行转义

或使用数组拆分 

var filename = fullPath.split(['/','\\']).pop();

如果需要，这将是将更多分隔符动态推入数组的方式。
如果fullPath在代码中由字符串显式设置，则需要转义反斜线！
喜欢"C:\\Documents and Settings\\img\\recycled log.jpg"

3

我用： 

var lastPart = path.replace(/\\$/,'').split('\\').pop();

它代替了最后一个，\因此也可以用于文件夹。

— 轰炸机
source
2 
<script type="text/javascript">
    function test()
    {
        var path = "C:/es/h221.txt";
        var pos =path.lastIndexOf( path.charAt( path.indexOf(":")+1) );
        alert("pos=" + pos );
        var filename = path.substring( pos+1);
        alert( filename );
    }
</script>
<form name="InputForm"
      action="page2.asp"
      method="post">
    <P><input type="button" name="b1" value="test file button"
    onClick="test()">
</form>
— 彼得·莫滕森
source
1

完整的答案是：

<html>
    <head>
        <title>Testing File Upload Inputs</title>
        <script type="text/javascript">

        function replaceAll(txt, replace, with_this) {
            return txt.replace(new RegExp(replace, 'g'),with_this);
        }

        function showSrc() {
            document.getElementById("myframe").href = document.getElementById("myfile").value;
            var theexa = document.getElementById("myframe").href.replace("file:///","");
            var path = document.getElementById("myframe").href.replace("file:///","");
            var correctPath = replaceAll(path,"%20"," ");
            alert(correctPath);
        }
        </script>
    </head>
    <body>
        <form method="get" action="#"  >
            <input type="file"
                   id="myfile"
                   onChange="javascript:showSrc();"
                   size="30">
            <br>
            <a href="#" id="myframe"></a>
        </form>
    </body>
</html>
— 桑迪普·库马尔（Sandeep Kumar）
source
1

在您的项目中几乎没有什么功能可以从Windows的完整路径以及GNU / Linux和UNIX绝对路径确定文件名。

/**
 * @param {String} path Absolute path
 * @return {String} File name
 * @todo argument type checking during runtime
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
 * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
 * @example basename('/home/johndoe/github/my-package/webpack.config.js') // "webpack.config.js"
 * @example basename('C:\\Users\\johndoe\\github\\my-package\\webpack.config.js') // "webpack.config.js"
 */
function basename(path) {
  let separator = '/'

  const windowsSeparator = '\\'

  if (path.includes(windowsSeparator)) {
    separator = windowsSeparator
  }

  return path.slice(path.lastIndexOf(separator) + 1)
}
— 阿敏·奈里
source
0 
<html>
    <head>
        <title>Testing File Upload Inputs</title>
        <script type="text/javascript">
            <!--
            function showSrc() {
                document.getElementById("myframe").href = document.getElementById("myfile").value;
                var theexa = document.getElementById("myframe").href.replace("file:///","");
                alert(document.getElementById("myframe").href.replace("file:///",""));
            }
            // -->
        </script>
    </head>
    <body>
        <form method="get" action="#"  >
            <input type="file" 
                   id="myfile" 
                   onChange="javascript:showSrc();" 
                   size="30">
            <br>
            <a href="#" id="myframe"></a>
        </form>
    </body>
</html>
— 塞米尔·海鲁（Semere Hailu）
source
1
尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。
— Ferrybig '16
0

成功为您的问题编写脚本，全面测试

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<p  title="text" id="FileNameShow" ></p>
<input type="file"
   id="myfile"
   onchange="javascript:showSrc();"
   size="30">


<script type="text/javascript">

function replaceAll(txt, replace, with_this) {
    return txt.replace(new RegExp(replace, 'g'), with_this);
}

function showSrc() {
    document.getElementById("myframe").href = document.getElementById("myfile").value;
    var theexa = document.getElementById("myframe").href.replace("file:///", "");
    var path = document.getElementById("myframe").href.replace("file:///", "");
    var correctPath = replaceAll(path, "%20", " ");
   alert(correctPath);
    var filename = correctPath.replace(/^.*[\\\/]/, '')
    $("#FileNameShow").text(filename)
}

— 阿敏·萨达蒂（Amin Saadati）
source
0

对于“文件名”和“路径”，此解决方案都更加简单和通用。

const str = 'C:\\Documents and Settings\\img\\recycled log.jpg';

// regex to split path to two groups '(.*[\\\/])' for path and '(.*)' for file name
const regexPath = /^(.*[\\\/])(.*)$/;

// execute the match on the string str
const match = regexPath.exec(str);
if (match !== null) {
    // we ignore the match[0] because it's the match for the hole path string
    const filePath = match[1];
    const fileName = match[2];
}
— 希汉姆
source
可以通过在代码中添加一些解释来提高答案的质量。有些人正在寻找这个答案，可能对编码或正则表达式来说是陌生的，而提供一些上下文相关的文本将有助于理解。
— jmarkmurphy
希望这种方式更好:)
— 希瑟姆
-3 
function getFileName(path, isExtension){

  var fullFileName, fileNameWithoutExtension;

  // replace \ to /
  while( path.indexOf("\\") !== -1 ){
    path = path.replace("\\", "/");
  }

  fullFileName = path.split("/").pop();
  return (isExtension) ? fullFileName : fullFileName.slice( 0, fullFileName.lastIndexOf(".") );
}
— 托马斯
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.