web-dev-qa-db-fra.com

Comment obtenir le nom du fichier à partir d'un chemin complet en utilisant JavaScript?

Est-il possible d'obtenir la dernière valeur (basée sur le symbole '\') à partir d'un chemin complet?

Exemple:

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

Avec ce cas, je veux juste obtenir recycled log.jpg du chemin complet en JavaScript.

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

Ceci gérera les deux chemins\[OR/in

591
nickf

Juste pour des raisons de performance, j'ai testé toutes les réponses données ici:

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

Et le gagnant est le Split et Pop réponse de style, Merci à bobince !

80
Danpe

De quelle plateforme provient le chemin? Les chemins Windows sont différents des chemins POSIX sont différents de Mac OS 9 les chemins sont différents des RISC OS sont différents ...

S'il s'agit d'une application Web dont le nom de fichier peut provenir de différentes plates-formes, il n'y a pas de solution unique. Cependant, une solution raisonnable consiste à utiliser à la fois "\" (Windows) et "/" (Linux/Unix/Mac et une alternative sous Windows) comme séparateurs de chemin. Voici une version non RegExp pour plus de plaisir:

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

Dans Node.js, vous pouvez utiliser le module d'analyse du chemin ...

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

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

En fait, votre solution ne protège pas contre une chaîne vide en entrée. Dans ce cas, il échoue avec TypeError: /([^(\\|\/|\:)]+)$/.exec(fullPath) has no properties.

bobince, voici une version de nickf qui gère les délimiteurs de chemin DOS, POSIX et HFS (et les chaînes vides):

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

La ligne de code JavaScript suivante vous donnera le nom du fichier.

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

Pas plus concis que answer de nickf, mais celui-ci "extrait" directement la réponse au lieu de remplacer les parties non désirées par une chaîne vide:

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

Une question demandant "obtenir le nom du fichier sans extension" fait référence à ici mais pas de solution pour cela . Voici la solution modifiée de la solution de Bobbie.

var name_without_ext = (file_name.split('\\').pop().split('/').pop().split('.'))[0];
7
Raymond Sin
<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>
2
chai

J'utilise: 

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

Il remplace le dernier \, de sorte qu'il fonctionne également avec des dossiers.

2
pomber

Un autre

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

Ici scinder avoir une expression régulière avec une classe de caractères
Il faut échapper aux deux personnages avec '\'

Et celui-ci a un tableau à scinder avec.

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

Facile à pousser des séparateurs dans un tableau si vous voulez ça!
Si vous codez une chaîne dans votre programme, vous devez échapper à la barre oblique inverse !
J'aime "C:\\Documents and Settings\\img\\recycled log.jpg"

1
Pauli Sudarshan Terho

La réponse complète est:

<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
Sandeep Kumar

Script réussi pour votre question, test complet

<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
Amin Saadati

Petite fonction à inclure dans votre projet pour déterminer le nom de fichier à partir d’un chemin complet pour Windows, ainsi que des chemins absolus GNU/Linux et 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
Amin NAIRI
<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>
0
Semere Hailu