Bagaimana cara mendapatkan nama file dari path lengkap menggunakan JavaScript?

310

Apakah ada cara agar saya bisa mendapatkan nilai terakhir (berdasarkan simbol '\') dari jalur penuh?

Contoh:

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

Dengan kasus ini, saya hanya ingin mendapatkan recycled log.jpgdari path lengkap dalam JavaScript.

javascript Jin Yong
sumber

Jawaban:

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

Ini akan menangani jalur \ OR / in

nickf
sumber
4
Tidak bekerja pada MAC OSX, menggunakan chrome, ia keluar dari karakter setelah \
Pankaj Phartiyal
7
Menurut situs ini, menggunakan replaceadalah jauh lebih lambat dari substryang dapat digunakan dalam hubungannya dengan lastIndexOf('/')+1: jsperf.com/replace-vs-substring
Nate
1
@nickf Nick, tidak yakin di mana saya salah tetapi kode tidak bekerja untuk saya ketika path file mengalami slash tunggal. Fiddle, meskipun untuk `\\` , itu berfungsi dengan baik.
Shubh
1
Saya hanya menjalankan ini di konsol saya, dan itu bekerja sempurna untuk garis miring: "/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '')pengembalianmoo.js
vikkee
1
@ZloySmiertniy Ada beberapa penjelas regex online yang bagus. rick.measham.id.au/paste/explain.pl?regex=%2F%5E . *% 5B% 5C% 5C% 5C% 2F% 5D% 2F dan regexper.com/#%2F%5E . *% 5B % 5C% 5C% 5C% 2F% 5D% 2F akan membantu. (Tautan terputus di sini, tetapi salin-tempel ke tab dan itu akan berfungsi)
nickf
115

Hanya demi kinerja, saya menguji semua jawaban yang diberikan di sini:

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

Dan pemenangnya adalah jawaban gaya Split dan Pop , Terima kasih kepada bobince !

Danpe
sumber
4
Per diskusi meta, silakan tambahkan kutipan yang sesuai untuk jawaban lain. Ini juga akan membantu untuk lebih menjelaskan bagaimana Anda menganalisis runtime.
jpmc26
Jangan ragu untuk membandingkan versi ini juga. Harus mendukung jalur file Mac dan Windows. path.split(/.*[\/|\\]/)[1];
tfmontague
2
Tes itu salah. substringTest mencari hanya untuk garis miring, execTest - hanya untuk garis miring terbalik sementara dua sisanya menangani kedua garis miring. Dan hasil aktual tidak relevan (lagi). Lihat ini: jsperf.com/name-from-path
Duka
@Rujuk tautan itu tidak lagi valid.
paqogomez
88

Di Node.js, Anda dapat menggunakan modul parse Path ...

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

var filename = path.parse(file).base;
//=> 'file.txt'
RobLoach
sumber
14
Jika menggunakan Node.js Anda cukup menggunakan basenamefungsi:path.basename(file)
electrovir
66

Dari platform apa jalur itu berasal? Jalur Windows berbeda dari jalur POSIX berbeda dari jalur Mac OS 9 jalur berbeda dari jalur RISC OS berbeda ...

Jika ini adalah aplikasi web tempat nama file dapat berasal dari platform yang berbeda, tidak ada satu solusi. Namun tusukan yang masuk akal adalah dengan menggunakan '\' (Windows) dan '/' (Linux / Unix / Mac dan juga alternatif pada Windows) sebagai pemisah jalur. Ini versi non-RegExp untuk kesenangan ekstra:

var leafname= pathname.split('\\').pop().split('/').pop();
bobince
sumber
Anda mungkin ingin menambahkan bahwa MacOS klasik (<= 9) menggunakan pemisah titik dua (:), tetapi saya tidak mengetahui adanya peramban yang mungkin masih digunakan yang tidak menerjemahkan jalur MacOS ke jalur POSIX dalam bentuk file : ///path/to/file.ext
eyelidlessness
4
Anda cukup menggunakan pop () alih-alih membalikkan () [0]. Itu memodifikasi array asli juga, tetapi tidak apa-apa dalam kasus Anda.
Chetan Sastry
Saya bertanya-tanya bagaimana kita bisa membuat rekanan untuk mendapatkan hanya jalan.
Todd Horst
Sesuatu seperti 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
Penamaan " nama daun " berasal dari Direktori / Nama struktur file "Pohon", hal pertama dari pohon adalah root , yang terakhir adalah daun => nama file adalah hal terakhir di jalur pohon => daun :-)
jave. web
29

Saat itu, solusi Anda tidak melindungi terhadap string kosong sebagai input. Dalam hal itu, gagal denganTypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties .

bobince, inilah versi nickf's yang menangani pembatas path DOS, POSIX, dan HFS (dan string kosong):

return fullPath.replace(/^.*(\\|\/|\:)/, '');
pengguna129661
sumber
4
jika kita menulis kode JS ini dalam PHP, kita perlu menambahkan satu \ ekstra untuk setiap \
Lenin Raj Rajasekaran
17

Baris kode JavaScript berikut akan memberi Anda nama file.

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

Tidak lebih ringkas dari jawaban nickf , tetapi jawaban ini langsung "mengekstrak" jawaban alih-alih mengganti bagian yang tidak diinginkan dengan string kosong:

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

Pertanyaan yang menanyakan "dapatkan nama file tanpa ekstensi" merujuk ke sini tetapi tidak ada solusi untuk itu. Berikut adalah solusi yang dimodifikasi dari solusi Bobbie.

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

Yang lainnya

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

Di sini split memiliki ekspresi reguler dengan kelas karakter
. Kedua karakter harus diloloskan dengan '\'

Atau gunakan array untuk membagi 

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

Ini akan menjadi cara untuk secara dinamis mendorong lebih banyak separator ke dalam array, jika diperlukan.
Jika fullPathsecara eksplisit diatur oleh string dalam kode Anda, ia harus lolos dari backslash !
Suka"C:\\Documents and Settings\\img\\recycled log.jpg"


sumber
3

Saya menggunakan: 

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

Ini menggantikan yang terakhir \sehingga juga berfungsi dengan folder.

pomber
sumber
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
sumber
1

Jawaban lengkapnya adalah:

<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
sumber
1

Sedikit fungsi untuk dimasukkan dalam proyek Anda untuk menentukan nama file dari jalur lengkap untuk Windows serta jalur absolut 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)
}
Amin NAIRI
sumber
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
sumber
1
Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda.
Ferrybig
0

Script berhasil untuk pertanyaan Anda, Tes Lengkap

<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
sumber
0

Solusi ini jauh lebih sederhana dan generik, untuk 'nama file' dan 'jalur'.

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
sumber
Kualitas jawaban dapat ditingkatkan dengan menambahkan beberapa penjelasan pada kode Anda. Beberapa orang yang mencari jawaban ini mungkin baru dalam hal pengkodean, atau ekspresi reguler, dan sedikit teks untuk memberikan konteks akan membantu pemahaman.
jmarkmurphy
Semoga cara ini lebih baik :)
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
sumber
-3

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

shriniket
sumber