Jak uzyskać nazwę pliku z pełnej ścieżki za pomocą JavaScript?

310

Czy istnieje sposób, w jaki mogę uzyskać ostatnią wartość (na podstawie symbolu „\”) z pełnej ścieżki?

Przykład:

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

W tym przypadku chcę tylko uzyskać recycled log.jpgpełną ścieżkę w JavaScript.

javascript Jin Yong
źródło

696

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

To obsłuży obie ścieżki \ OR /

pseudonim
źródło

4

Nie działa na MAC OSX, używając chromu, unika postaci po \

Pankaj Phartiyal

7

Według tej strony korzystanie replacejest znacznie wolniejsze niż substr, co można stosować w połączeniu z lastIndexOf('/')+1: jsperf.com/replace-vs-substring

Nate

1

@nickf Nick, nie jestem pewien, gdzie się mylę, ale kod nie działa dla mnie, gdy ścieżka do pliku zawiera pojedynczy ukośnik. Fiddle, chociaż dla `\\` działa dobrze.

Shubh

1

Właśnie uruchomiłem to na mojej konsoli i działało idealnie dla ukośników: "/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '')powrotymoo.js

vikkee

1

@ZloySmiertniy Istnieje kilka dobrych internetowych wyjaśniaczy wyrażeń regularnych. rick.measham.id.au/paste/explain.pl?regex=%2F%5E . *% 5B% 5C% 5C% 5C% 2F% 5D% 2F i regexper.com/#%2F%5E . *% 5B % 5C% 5C% 5C% 2F% 5D% 2F powinno pomóc. (Linki są tu zepsute, ale skopiuj i wklej do karty, a to zadziała)

nickf

115

Ze względu na wydajność przetestowałem wszystkie podane tutaj odpowiedzi:

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

Zwycięzcą jest odpowiedź w stylu split i pop , dzięki bobince !

Danpe
źródło

4

W przypadku meta dyskusji dodaj odpowiedni cytat do innych odpowiedzi. Pomocne byłoby również wyjaśnienie, w jaki sposób analizowano środowisko wykonawcze.

jpmc26

Zachęcamy również do przetestowania tej wersji. Powinien obsługiwać ścieżki plików zarówno dla komputerów Mac, jak i Windows. path.split(/.*[\/|\\]/)[1];

tfmontague,

2

Test jest niepoprawny. substringTest wyszukuje tylko ukośnik, execTest - tylko ukośnik, podczas gdy dwa pozostałe obsługują oba ukośniki. Rzeczywiste wyniki nie są już istotne. Sprawdź to: jsperf.com/name-from-path

Smutek

@Drief ten link nie jest już ważny.

paqogomez

88

W Node.js możesz użyć modułu parsującego Path ...

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

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

RobLoach
źródło

14

Jeśli używasz Node.js, możesz po prostu użyć basenamefunkcji:path.basename(file)

electrovir

66

Z jakiej platformy pochodzi ścieżka? Ścieżki systemu Windows różnią się od ścieżek POSIX różnią się od ścieżek Mac OS 9 ścieżki różnią się od ścieżek RISC OS są różne ...

Jeśli jest to aplikacja internetowa, w której nazwa pliku może pochodzić z różnych platform, nie ma jednego rozwiązania. Jednak rozsądnym rozwiązaniem jest użycie zarówno „\” (Windows), jak i „/” (Linux / Unix / Mac, a także alternatywy w Windows) jako separatorów ścieżek. Oto wersja bez RegExp dla dodatkowej zabawy:

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

Bobin
źródło

Możesz dodać, że klasyczny MacOS (<= 9) używał separatorów jelita grubego (:), ale nie znam żadnych przeglądarek, które mogą nadal być w użyciu, które nie tłumaczyłyby ścieżek MacOS na ścieżki POSIX w postaci pliku : ///path/to/file.ext

powiek

4

Możesz po prostu użyć pop () zamiast reverse () [0]. Zmienia również oryginalną tablicę, ale w twoim przypadku jest w porządku.

Chetan Sastry

Zastanawiam się, jak możemy stworzyć odpowiednik, aby uzyskać tylko ścieżkę.

Todd Horst

Coś w stylu

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

Nazewnictwo „ nazwa liścia ” pochodzi od nazwy struktury katalogu / pliku „Drzewo”, pierwszą rzeczą drzewa jest root , ostatnimi są liście => nazwa pliku jest ostatnią rzeczą na ścieżce drzewa => liść :-)

jave. web

29

Ates, twoje rozwiązanie nie chroni przed pustym łańcuchem jako wejściem. W takim przypadku kończy się niepowodzeniem TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties.

bobince, oto wersja nickf, która obsługuje ograniczniki DOS, POSIX i HFS (i puste ciągi znaków):

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

użytkownik129661
źródło

4

jeśli piszemy ten kod JS w PHP, musimy dodać jeden dodatkowy \ dla każdego \

Lenin Raj Rajasekaran

17

Poniższy wiersz kodu JavaScript poda nazwę pliku.

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

Epperlyg
źródło

10

Nie bardziej zwięzłe niż odpowiedź nickf , ale ta bezpośrednio „wyodrębnia” odpowiedź zamiast zastępować niechciane części pustym ciągiem:

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

Ates Goral
źródło

8

Pytanie „pobierz nazwę pliku bez rozszerzenia” znajduje się tutaj, ale nie ma na to rozwiązania. Oto rozwiązanie zmodyfikowane z rozwiązania Bobbiego.

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

Raymond Sin
źródło

6

Inny

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

Tutaj split ma wyrażenie regularne z klasą znaków
znaków Dwa znaki muszą być poprzedzone znakiem \

Lub użyj tablicy do podzielenia

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

W razie potrzeby byłby to sposób dynamicznego wypychania większej liczby separatorów do tablicy.
Jeśli fullPathjest to jawnie ustawione przez ciąg znaków w kodzie, musisz uciec od ukośnika odwrotnego !
Lubić"C:\\Documents and Settings\\img\\recycled log.jpg"

źródło

3

Używam:

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

Zastępuje ostatni, \więc działa również z folderami.

pomber
źródło

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
źródło

1

Pełna odpowiedź to:

<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
źródło

1

Niewiele funkcji do uwzględnienia w projekcie w celu określenia nazwy pliku z pełnej ścieżki dla Windows, a także bezwzględnych ścieżek GNU / Linux i 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)
}

Amin NAIRI
źródło

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
źródło

1

Ten fragment kodu może rozwiązać pytanie, ale wyjaśnienie naprawdę pomaga poprawić jakość posta. Pamiętaj, że w przyszłości odpowiadasz na pytanie dla czytelników, a ci ludzie mogą nie znać przyczyn Twojej sugestii kodu.

Ferrybig,

0

Skopiuj pomyślnie swoje pytanie, pełny 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
źródło

0

To rozwiązanie jest znacznie prostsze i ogólne, zarówno dla „nazwy pliku”, jak i „ścieżki”.

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
źródło

Jakość odpowiedzi można poprawić, dodając wyjaśnienia do kodu. Niektórzy ludzie szukający tej odpowiedzi mogą być nowi w kodowaniu lub wyrażeniach regularnych, a krótki tekst nadający kontekst przejdzie długą drogę, aby pomóc w zrozumieniu.

jmarkmurphy

mam nadzieję, że ta droga jest lepsza :)

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
źródło

-3

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

shriniket
źródło

Jak uzyskać nazwę pliku z pełnej ścieżki za pomocą JavaScript?

Odpowiedzi: