วิธีรับชื่อไฟล์จากพา ธ เต็มโดยใช้ JavaScript

310

มีวิธีที่ฉันสามารถรับค่าสุดท้าย (ตามสัญลักษณ์ '\') จากเส้นทางแบบเต็มหรือไม่

ตัวอย่าง:

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

ด้วยกรณีนี้ฉันเพียงต้องการได้รับrecycled log.jpgจากเส้นทางแบบเต็มใน JavaScript

javascript

696

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

สิ่งนี้จะจัดการทั้ง \ OR / ในเส้นทาง

— nickf
แหล่งที่มา

4

ไม่สามารถใช้งานได้กับ Mac OSX โดยใช้โครเมี่ยมมันจะหนีอักขระหลังจาก \

— Pankaj Phartiyal

7

ตามเว็บไซต์นี้โดยใช้replaceเป็นมากช้ากว่าsubstrซึ่งสามารถใช้ร่วมกับlastIndexOf('/')+1: jsperf.com/replace-vs-substring

— เนท

1

@nickf Nick ไม่แน่ใจว่าฉันจะไปไหนผิด แต่รหัสไม่ทำงานสำหรับฉันเมื่อพา ธ ของไฟล์มีสแลชเดี่ยว Fiddleแม้ว่าสำหรับ`\\ 'มันทำงานได้ดี

— Shubh

1

ฉันเพิ่งใช้สิ่งนี้บนคอนโซลของฉันและมันทำงานได้สมบูรณ์แบบสำหรับเครื่องหมายทับด้านหน้า: "/var/drop/foo/boo/moo.js".replace(/^.*[\\\/]/, '')ผลตอบแทนmoo.js

— vikkee

1

@ZloySmiertniy มีผู้อธิบาย regex ออนไลน์ที่ดีอยู่สองสามคน rick.measham.id.au/paste/explain.pl?regex=%2F%5E . *% 5B% 5C% 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

และผู้ชนะคือคำตอบสไตล์Split and PopขอบคุณBobince !

— Danpe
แหล่งที่มา

4

ในการอภิปรายเมตากรุณาเพิ่มการอ้างอิงที่เหมาะสมให้กับคำตอบอื่น ๆ นอกจากนี้ยังจะเป็นประโยชน์ในการอธิบายวิธีวิเคราะห์รันไทม์ให้ดียิ่งขึ้น

— jpmc26

รู้สึกอิสระที่จะเปรียบเทียบรุ่นนี้เช่นกัน ควรรองรับพา ธ ไฟล์ทั้ง Mac และ Windows path.split(/.*[\/|\\]/)[1];

— tfmontague

2

การทดสอบไม่ถูกต้อง substringTest ค้นหาเฉพาะการฟอร์เวิร์ดสแลช, execTest - เฉพาะแบ็กสแลชในขณะที่อีกสองที่เหลือจัดการทั้งสองสแลช และผลลัพธ์ที่แท้จริงไม่เกี่ยวข้อง (อีกต่อไป) ลองดูสิ: jsperf.com/name-from-path

— Grief

@ สรุปว่าลิงก์ไม่ถูกต้องอีกต่อไป

— paqogomez

88

ใน Node.js คุณสามารถใช้โมดูลการแยกวิเคราะห์พา ธ ...

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

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

— RobLoach
แหล่งที่มา

14

หากใช้ Node.js คุณสามารถใช้งานbasenameฟังก์ชั่น:path.basename(file)

— electrovir

66

เส้นทางมาจากแพลตฟอร์มอะไร เส้นทาง Windows แตกต่างจากเส้นทาง POSIX แตกต่างจากเส้นทาง Mac OS 9 เส้นทางแตกต่างจากเส้นทาง RISC OS แตกต่างกัน ...

หากเป็นแอปพลิเคชันบนเว็บที่ชื่อไฟล์สามารถมาจากแพลตฟอร์มที่แตกต่างกันก็ไม่มีวิธีแก้ปัญหา อย่างไรก็ตามการแทงที่เหมาะสมคือการใช้ทั้ง '\' (Windows) และ '/' (Linux / Unix / Mac และเป็นทางเลือกบน Windows) เป็นตัวคั่นพา ธ นี่คือรุ่นที่ไม่ใช่ RegExp เพื่อความสนุกสนานเป็นพิเศษ:

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

— bobince
แหล่งที่มา

คุณอาจต้องการเพิ่ม MacOS แบบคลาสสิก (<= 9) ที่ใช้ตัวคั่นโคลอน (:) แต่ฉันไม่ทราบว่ามีเบราว์เซอร์ใดที่อาจใช้งานอยู่ซึ่งไม่ได้แปลเส้นทาง MacOS เป็นเส้นทาง POSIX ในรูปแบบของไฟล์ : ///path/to/file.ext

— eyelidlessness

4

คุณสามารถใช้ป๊อป () แทนการย้อนกลับ () [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);

— Todd Horst

การตั้งชื่อ " leaf name" นั้นได้มาจาก Directory / ชื่อโครงสร้างไฟล์ "Tree" สิ่งแรกของtreeคือrootส่วนสุดท้ายคือleaves => ชื่อไฟล์คือสิ่งสุดท้ายในpath tree => leaf :-)

— jave เว็บ

29

Ates โซลูชันของคุณไม่ได้ป้องกันสตริงว่างเปล่าเป็นอินพุต TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no propertiesในกรณีที่มันล้มเหลวด้วย

bobince นี่คือเวอร์ชันของ nickf ที่จัดการตัวคั่นเส้นทาง DOS, POSIX และ HFS (และสตริงว่าง):

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

— user129661
แหล่งที่มา

4

ถ้าเรากำลังเขียนโค้ด JS นี้ใน PHP เราจำเป็นต้องเพิ่มหนึ่ง \ สำหรับแต่ละ \

— เลนินราชา Rajasekaran

17

บรรทัดโค้ด JavaScript ต่อไปนี้จะให้ชื่อไฟล์แก่คุณ

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

— Epperlyg
แหล่งที่มา

10

ไม่กระชับกว่าคำตอบของ nickf แต่คำตอบนี้โดยตรง "แยก" คำตอบแทนที่จะแทนที่ส่วนที่ไม่ต้องการด้วยสตริงว่าง:

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

— Ates Goral
แหล่งที่มา

8

คำถามที่ถามว่า "รับชื่อไฟล์โดยไม่มีนามสกุล" อ้างถึงที่นี่ แต่ไม่มีวิธีแก้ปัญหาสำหรับเรื่องนั้น นี่คือโซลูชันที่แก้ไขจากโซลูชันของ Bobbie

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

— Raymond Sin
แหล่งที่มา

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();

มันแทนที่ล่าสุด\ดังนั้นจึงสามารถใช้งานกับโฟลเดอร์ได้

— pomber
แหล่งที่มา

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>

— Sandeep Kumar
แหล่งที่มา

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

— อามิน NAIRI
แหล่งที่มา

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
แหล่งที่มา

1

ในขณะที่ข้อมูลโค้ดนี้อาจแก้ไขคำถามรวมถึงคำอธิบายช่วยปรับปรุงคุณภาพของโพสต์ของคุณ จำไว้ว่าคุณกำลังตอบคำถามสำหรับผู้อ่านในอนาคตและคนเหล่านั้นอาจไม่ทราบสาเหตุของการแนะนำรหัสของคุณ

— Ferrybig

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

— Hicham
แหล่งที่มา

สามารถปรับปรุงคุณภาพของคำตอบได้โดยเพิ่มคำอธิบายลงในโค้ดของคุณ บางคนที่ค้นหาคำตอบนี้อาจใหม่กับการเขียนโค้ดหรือการแสดงออกปกติและข้อความเล็กน้อยที่จะให้บริบทจะไปไกลเพื่อช่วยให้เข้าใจ

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

— โทมัส
แหล่งที่มา

-3

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

— shriniket
แหล่งที่มา