Як отримати ім'я файлу з повного шляху за допомогою JavaScript?


310

Чи є спосіб отримати останнє значення (на основі символу '\') з повного шляху?

Приклад:

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

У цьому випадку я просто хочу отримати recycled log.jpgповний шлях у JavaScript.

Відповіді:


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

Це буде обробляти обидва \ АБО / в шляхах


4
Не працює на MAC OSX, використовуючи хром, він уникає символів після \
Pankaj Phartiyal

7
У відповідності з цього сайту, використовуючи replaceце набагато повільніше , ніж substr, який може бути використаний в поєднанні з lastIndexOf('/')+1: jsperf.com/replace-vs-substring
Nate

1
@nickf Nick, не впевнений, де я помиляюся, але код не працює для мене, коли шлях до файлу має одну косу рису. Fiddle, хоча для `\\` він працює чудово.
Шуб

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

А переможець - відповідь Спліт та Поп , Завдяки bobince !


4
Згідно з мета-дискусією, будь ласка, додайте відповідне цитування до інших відповідей. Було б також корисно краще пояснити, як ви аналізували час виконання.
jpmc26

Не соромтеся також орієнтуватися на цю версію. Слід підтримувати як файли Mac, так і Windows. path.split(/.*[\/|\\]/)[1];
tfmontague

2
Тест невірний. substringTest здійснює пошук лише для косої риски вперед, execTest - лише для зворотної косої риски, в той час як два решти обробляють обидві нахили. І фактичні результати вже не актуальні. Перевірте це: jsperf.com/name-from-path
горе

@Grief, що посилання більше не діє.
paqogomez

88

У Node.js ви можете використовувати модуль розбору Path ...

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

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

14
При використанні Node.js ви можете просто використовувати basenameфункцію:path.basename(file)
electrovir

66

З якої платформи походить шлях? Шлях до Windows відрізняється від POSIX, контури відрізняються від Mac OS 9. Шляхи відрізняються від RISC. Шляхи ОС відрізняються ...

Якщо це веб-додаток, де ім'я файлу може надходити з різних платформ, немає жодного рішення. Однак розумною проблемою є використання як "\" (Windows), так і "/" (Linux / Unix / Mac, а також альтернатива для Windows) як роздільники шляху. Ось версія не для RegExp для додаткової забави:

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

Ви можете додати, що класичний MacOS (<= 9) використовував роздільники товстої кишки (:), але я не знаю жодних браузерів, які все ще можуть бути використані, які не перевели шляхи MacOS на шляхи POSIX у вигляді файлу : ///path/to/file.ext
безглазкість

4
Ви можете просто використовувати pop () замість reverse () [0]. Він також змінює оригінальний масив, але це добре у вашому випадку.
Chetan Sastry

Мені цікаво, як ми можемо створити аналог, щоб отримати лише шлях.
Тодд Хорст

Щось на кшталт 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);
Тодд Хорст

Іменування « лист ім'я» виводяться з каталогу / файл назви структури «дерево», перше , що з дерева є коренем , останніми є листи => ім'я файлу є останньою річчю , в дереві шляху => лист :-)
Jave. веб

29

Атес, ваше рішення не захищає від порожнього рядка як вхідного. У цьому випадку це не вдається TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties.

bobince, ось версія Nickf, яка обробляє роздільники шляху DOS, POSIX та HFS (та порожні рядки):

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

4
якщо ми пишемо цей JS-код у PHP, нам потрібно додати по одній додатковій \ для кожного \
Ленін Радж Раджасекаран,

17

Наступний рядок коду JavaScript дасть вам ім'я файлу.

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

10

Не більше короткий , ніж nickf ігрового відповіді , але це один безпосередньо «екстракти» відповідь замість того , щоб замінити непотрібні частини з нового рядка:

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

8

Питання із запитом "отримати ім'я файлу без розширення" дивіться тут, але для цього немає рішення. Ось рішення, модифіковане з рішення Боббі.

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

6

Інший

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

Тут розділення мають регулярний вираз із класом символів
. Два символи потрібно уникнути символом "\"

Або використовувати масив для розділення

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

Це був би спосіб динамічно просунути більше роздільників у масив, якщо це потрібно.
Якщо fullPathявно встановлено рядок у вашому коді, йому потрібно уникнути зворотної косої риси !
Подібно до"C:\\Documents and Settings\\img\\recycled log.jpg"


3

Я використовую:

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

Він замінює останній, \тому він також працює з папками.


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>

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>

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)
}

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>

1
Хоча цей фрагмент коду може вирішити питання, у тому числі пояснення дійсно допомагає покращити якість вашої публікації. Пам'ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.
Феррібіг

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)
}


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

Якість відповіді можна покращити, додавши до свого коду пояснення. Деякі люди, які шукають цю відповідь, можуть стати новим для кодування або регулярних виразів, і трохи тексту, щоб надати контекст, пройдуть довгий шлях, щоб допомогти зрозуміти.
jmarkmurphy

сподіваюся, що цей спосіб буде кращим :)
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(".") );
}

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.