Wie erhalte ich den Dateinamen mit JavaScript von einem vollständigen Pfad?

310

Gibt es eine Möglichkeit, den letzten Wert (basierend auf dem Symbol '\') von einem vollständigen Pfad abzurufen?

Beispiel:

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

In diesem Fall möchte ich nur recycled log.jpgden vollständigen Pfad in JavaScript ermitteln.

javascript Jin Yong
quelle

697

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

Dies behandelt beide \ OR / in-Pfade

nickf
quelle

4

Funktioniert nicht unter MAC OSX, mit Chrom, es entgeht Zeichen nach \

Pankaj Phartiyal

7

Nach dieser Seite, unter Verwendung replaceist viel langsamer als substr, die in Verbindung verwendet werden kann , mit lastIndexOf('/')+1: jsperf.com/replace-vs-substring

Nate

1

@nickf Nick, ich bin mir nicht sicher, wo ich falsch liege, aber der Code funktioniert bei mir nicht, wenn der Dateipfad einen einzelnen Schrägstrich enthält. Fiddle, obwohl es für `\\` gut funktioniert.

Shubh

1

Ich lief dies auf meiner Konsole, und es funktionierte perfekt für Schrägstriche: "/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '')Erträgemoo.js

vikkee

1

@ZloySmiertniy Es gibt ein paar gute Online-Regex-Erklärungen. rick.measham.id.au/paste/explain.pl?regex=%2F%5E . *% 5B% 5C% 5C% 5C% 2F% 5D% 2F und regexper.com/#%2F%5E . *% 5B % 5C% 5C% 5C% 2F% 5D% 2F sollte helfen. (Links sind hier kaputt, aber Kopieren-Einfügen in einen Tab und es wird funktionieren)

Nickf

115

Nur aus Gründen der Leistung habe ich alle hier gegebenen Antworten getestet:

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

Und der Gewinner ist die Antwort im Split- und Pop- Stil: Danke an Bobince !

Danpe
quelle

4

Fügen Sie gemäß der Metadiskussion anderen Antworten entsprechende Zitate hinzu. Es wäre auch hilfreich, besser zu erklären, wie Sie die Laufzeit analysiert haben.

jpmc26

Fühlen Sie sich frei, diese Version auch zu vergleichen. Sollte sowohl Mac- als auch Windows-Dateipfade unterstützen. path.split(/.*[\/|\\]/)[1];

Montag,

2

Der Test ist falsch. substringTest sucht nur nach Schrägstrich, execTest - nur nach Backslash, während zwei verbleibende Schrägstriche behandeln. Und tatsächliche Ergebnisse sind (nicht mehr) relevant. Überprüfen Sie dies heraus: jsperf.com/name-from-path

Trauer

@Grief dieser Link ist nicht mehr gültig.

Paqogomez

88

In Node.js können Sie das Analysemodul von Path verwenden ...

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

var filename = path.parse(file).base;
//=> 'file.txt'

RobLoach
quelle

14

Wenn Sie Node.js verwenden, können Sie einfach die folgende basenameFunktion verwenden:path.basename(file)

Electrovir

66

Von welcher Plattform kommt der Weg? Windows-Pfade unterscheiden sich von POSIX-Pfaden unterscheiden sich von Mac OS 9-Pfaden unterscheiden sich von RISC-Betriebssystempfaden unterscheiden sich ...

Wenn es sich um eine Web-App handelt, bei der der Dateiname von verschiedenen Plattformen stammen kann, gibt es keine Lösung. Es ist jedoch sinnvoll, sowohl '\' (Windows) als auch '/' (Linux / Unix / Mac und auch eine Alternative unter Windows) als Pfadtrennzeichen zu verwenden. Hier ist eine Nicht-RegExp-Version für zusätzlichen Spaß:

var leafname= pathname.split('\\').pop().split('/').pop();

Bobince
quelle

Vielleicht möchten Sie hinzufügen, dass klassisches MacOS (<= 9) Doppelpunkttrennzeichen (:) verwendet, aber mir sind keine Browser bekannt, die möglicherweise noch verwendet werden und MacOS-Pfade nicht in Form von Dateien in POSIX-Pfade übersetzt haben : ///path/to/file.ext

Augenlidlosigkeit

4

Sie können einfach pop () anstelle von reverse () [0] verwenden. Es ändert auch das ursprüngliche Array, ist aber in Ihrem Fall in Ordnung.

Chetan Sastry

Ich frage mich, wie wir ein Gegenstück schaffen können, um genau den richtigen Weg zu finden.

Todd Horst

So etwas wie

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

Naming „ Blattname“ ist abgeleitet von Verzeichnis / Dateistruktur Namen „Baum“, erstes , was des Baumes ist Wurzel , die letzten sind die Blätter => Dateiname ist das letzte , was im Baum path => Blatt :-)

jave. Web

29

Ihre Lösung schützt nicht vor einer leeren Zeichenfolge als Eingabe. In diesem Fall schlägt es mit fehl TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties.

Bobince, hier ist eine Version von Nickfs, die DOS-, POSIX- und HFS-Pfadbegrenzer (und leere Zeichenfolgen) verarbeitet:

return fullPath.replace(/^.*(\\|\/|\:)/, '');

user129661
quelle

4

Wenn wir diesen JS-Code in PHP schreiben, müssen wir ein zusätzliches \ für jedes \ hinzufügen

Lenin Raj Rajasekaran

17

In der folgenden Zeile des JavaScript-Codes erhalten Sie den Dateinamen.

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

Epperlyg
quelle

10

Nicht prägnanter als die Antwort von Nickf , aber diese "extrahiert" die Antwort direkt, anstatt unerwünschte Teile durch eine leere Zeichenfolge zu ersetzen:

var filename = /([^\\]+)$/.exec(fullPath)[1];

Ates Goral
quelle

8

Eine Frage mit der Frage "Dateinamen ohne Erweiterung abrufen" finden Sie hier, aber keine Lösung dafür. Hier ist die Lösung, die von Bobbies Lösung modifiziert wurde.

var name_without_ext = (file_name.split('\\').pop().split('/').pop().split('.'))[0];

Raymond Sin
quelle

6

Noch einer

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

Hier hat split einen regulären Ausdruck mit einer Zeichenklasse.
Die beiden Zeichen müssen mit '\' maskiert werden.

Oder verwenden Sie das Array zum Teilen

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

Auf diese Weise können bei Bedarf mehr Trennzeichen dynamisch in ein Array verschoben werden.
Wenn dies fullPathexplizit durch eine Zeichenfolge in Ihrem Code festgelegt wird, muss der Backslash vermieden werden !
Mögen"C:\\Documents and Settings\\img\\recycled log.jpg"

quelle

3

Ich benutze:

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

Es ersetzt das letzte, \sodass es auch mit Ordnern funktioniert.

pomber
quelle

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>

Peter Mortensen
quelle

1

Die vollständige Antwort lautet:

<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
quelle

1

Kleine Funktion, die Sie in Ihr Projekt aufnehmen müssen, um den Dateinamen aus einem vollständigen Pfad für Windows sowie aus absoluten GNU / Linux- und UNIX-Pfaden zu ermitteln.

/**
 * @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)
}

Amin NAIRI
quelle

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
quelle

1

Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich dabei, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.

Ferrybig

0

Erfolgreiches Skript für Ihre Frage, vollständiger Test

<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
quelle

0

Diese Lösung ist viel einfacher und allgemeiner, sowohl für 'Dateiname' als auch für 'Pfad'.

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];
}

Hicham
quelle

Die Qualität einer Antwort kann verbessert werden, indem Sie Ihrem Code eine Erklärung hinzufügen. Einige Leute, die nach dieser Antwort suchen, sind möglicherweise neu in der Codierung oder in regulären Ausdrücken, und ein kleiner Text, der den Kontext angibt, trägt wesentlich zum Verständnis bei.

jmarkmurphy

hoffe, dieser Weg ist besser :)

Hicham

-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(".") );
}

Tomas
quelle

-3

var file_name = file_path.substring(file_path.lastIndexOf('/'));

Shriniket
quelle

Wie erhalte ich den Dateinamen mit JavaScript von einem vollständigen Pfad?

Antworten: