JavaScript kullanarak dosya adını tam yoldan nasıl alabilirim?


310

Son değeri ('\' sembolüne göre) tam yoldan alabilmemin bir yolu var mı?

Misal:

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

Bu durumda, recycled log.jpgJavaScript'teki tam yoldan almak istiyorum .

Yanıtlar:


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

Bu, hem \ OR / hem de yolları işleyecektir


4
MAC OSX'te krom kullanarak çalışmaz, \ 'den sonra karakterden kaçar \
Pankaj Phartiyal

7
Bu siteye göre, kullanan replacebir çok daha yavaş substrbağlantılı olarak kullanılabilecek, lastIndexOf('/')+1: jsperf.com/replace-vs-substring
Nate

1
@ nickf Nick, nerede yanlış yaptığımdan emin değilim ama dosya yolu tek eğik çizgi olduğunda kod benim için çalışmıyor. Fiddle, \\ ` için iyi çalışıyor.
Shubh

1
Bunu konsolumda çalıştırdım ve ileri eğik çizgiler için mükemmel çalıştı: "/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '')dönermoo.js
vikkee

1
@ZloySmiertniy Birkaç iyi çevrimiçi normal ifade açıklayıcı var. rick.measham.id.au/paste/explain.pl?regex=%2F%5E . *% 5B% 5C% 5C% 5C% 2F% 5D% 2F ve regexper.com/#%2F%5E . *% 5B % 5C% 5C% 5C% 2F% 5D% 2F yardımcı olacaktır. (Bağlantılar burada kesildi, ancak bir sekmeye kopyalayıp yapıştırın ve işe yarayacak)
nickf

115

Sadece performans uğruna, burada verilen tüm cevapları test ettim:

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

Ve kazanan Split ve Pop tarzı cevap, Bobince sayesinde !


4
Meta tartışma başına, lütfen diğer yanıtlara uygun alıntı ekleyin. Çalışma zamanını nasıl analiz ettiğinizi daha iyi açıklamak da yararlı olacaktır.
jpmc26

Bu sürümü de karşılaştırmaktan çekinmeyin. Hem Mac hem de Windows dosya yollarını desteklemelidir. path.split(/.*[\/|\\]/)[1];
tfmontague

2
Test yanlış. substringTest yalnızca eğik çizgi için arama yapar, execTest - yalnızca iki eğik çizgi işlenirken yalnızca ters eğik çizgi için arama yapar. Ve gerçek sonuçlar ilgili değil (artık). Şuna bir
Grief

@Bağlantı artık geçerli değil.
paqogomez


66

Yol hangi platformdan geliyor? Windows yolları POSIX yollarından farklı Mac OS 9'dan farklı yollar RISC OS yollarından farklı ...

Dosya adının farklı platformlardan gelebileceği bir web uygulamasıysa, tek bir çözüm yoktur. Ancak mantıklı bir sapma, yol ayırıcı olarak hem '\' (Windows) hem de '/' (Linux / Unix / Mac ve ayrıca Windows'ta bir alternatif) kullanmaktır. Ekstra eğlence için RegExp olmayan bir sürüm:

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

Klasik MacOS (<= 9) kullanılmış iki nokta ayırıcı (:) kullandığınızı eklemek isteyebilirsiniz, ancak hala kullanımda olabilecek ve MacOS yollarını dosya biçiminde POSIX yollarına çevirmeyen tarayıcıların farkında değilim : ///path/to/file.ext
eyelidlessness

4
Reverse () [0] yerine pop () kullanabilirsiniz. Orijinal diziyi de değiştirir, ancak sizin durumunuzda sorun yoktur.
Chetan Sastry

Sadece yolu bulmak için nasıl bir meslektaşı oluşturabileceğimizi merak ediyorum.
Todd Horst

Gibi bir şey 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

Adlandırma " yaprak adı" Dizin / Dosya yapısı adı "Ağaç" türetilmiştir, ilk şey ağacının olduğu kök son olan yapraklar => dosya adı son şey ağaç yolu => yaprak :-)
jave. web

29

Ates, çözümünüz girdi olarak boş bir dizeye karşı koruma sağlamaz. Bu durumda, başarısız olur TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties.

bobince, işte DOS, POSIX ve HFS yol sınırlayıcılarını (ve boş dizeleri) işleyen nickf'lerin bir sürümü:

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

4
PHP'de bu JS kodunu yazıyorsak, her biri için bir \ daha eklemeliyiz
Lenin Raj Rajasekaran

17

Aşağıdaki JavaScript kodu satırı size dosya adını verecektir.

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

10

Değil fazla nickf en fazla özlü cevap , ama bu doğrudan "özü" yerine boş bir dize ile istenmeyen parçaları değiştirmenin cevap:

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

8

"Uzantı olmadan dosya adı al" sorusunu soran bir soru var, ancak bunun için çözüm yok. İşte Bobbie'nin çözümünden değiştirilen çözüm.

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

6

Bir diğeri

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

Burada bölünmüş bir karakter sınıfına sahip düzenli bir ifadeye sahiptir
. İki karakterin '\'

Veya bölmek için dizi kullanın

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

Gerekirse, daha fazla ayırıcıyı bir diziye dinamik olarak aktarmanın yolu olurdu.
Eğer fullPathaçıkça kodunuzda bir dize tarafından ayarlanır o gereken ters eğik çizgi kaçış !
Sevmek"C:\\Documents and Settings\\img\\recycled log.jpg"


3

Kullanırım:

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

Sonuncunun yerine geçer, \böylece klasörlerle de çalışır.


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

Tam cevap:

<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

GNU / Linux & UNIX mutlak yollarının yanı sıra Windows için tam bir yoldan dosya adını belirlemek için projenize dahil edilecek küçük bir işlev.

/**
 * @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
Bu kod snippet'i soruyu çözebilir, ancak bir açıklama da dahil olmak üzere , yayınınızın kalitesini artırmaya yardımcı olur. Gelecekte okuyucular için soruyu cevapladığınızı ve bu kişilerin kod önerinizin nedenlerini bilmeyebileceğini unutmayın.
Ferrybig

0

Sorunuz için Başarıyla Komut Dosyası, Tam 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)
}


0

Bu çözüm hem 'dosya adı' hem de 'yol' için çok daha basit ve geneldir.

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

Bir yanıtın kalitesi, kodunuza bir açıklama ekleyerek geliştirilebilir. Bu cevabı arayan bazı kişiler kodlamada yeni olabilir veya düzenli ifadeler olabilir ve bağlam vermek için küçük bir metin anlamaya yardımcı olmak için uzun bir yol kat edecektir.
jmarkmurphy

umut bu yol daha iyi :)
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(".") );
}

-3

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.