web-dev-qa-db-fra.com

Javascript - Comment extraire un nom de fichier d'un contrôle de saisie de fichier

Lorsqu'un utilisateur sélectionne un fichier dans une page Web, je veux pouvoir extraire uniquement le nom du fichier.

J'ai essayé la fonction str.search mais elle semble échouer lorsque le nom du fichier ressemble à ceci: c:\uploads\ilike.this.file.jpg .

Comment pouvons-nous extraire uniquement le nom du fichier sans extension?

javascriptbrowserextract
95
Yogi Yang 007

En supposant que votre <input type = "fichier"> ait un identifiant de upload cela devrait faire l'affaire, espérons-le

var fullPath = document.getElementById('upload').value;
if (fullPath) {
    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    alert(filename);
}
104
Ian Oxley

Pour diviser la chaîne ({chemin du fichier}/{nom du fichier}) et obtenir le nom du fichier, vous pouvez utiliser quelque chose comme ceci:

str.split(/(\\|\/)/g).pop()

"La méthode pop supprime le dernier élément d'un tableau et renvoie la valeur À l'appelant." RÉSEAU DE DÉVELOPPEURS MOZILLA

Exemple:

à partir de: "/home/user/file.txt".split(/(\\|\/)/g).pop()

vous obtenez: "file.txt"

169
VallaDanger

De nos jours, il existe un moyen beaucoup plus simple:

var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;
62
maxime schoeni

Très simple 

let file = $("#fileupload")[0].files[0]; 
file.name
24
Uchenna

En supposant:

<input type="file" name="file1" id="theFile">

Le JavaScript serait:

var fileName = document.getElementById('theFile').files[0].name;
9
Xedret
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
7
TM.

Je viens de faire ma propre version de cela. Ma fonction peut être utilisée pour extraire ce que vous voulez, si vous n’avez pas besoin de tout, vous pouvez facilement supprimer du code.

<html>
<body>
<script type="text/javascript">
// Useful function to separate path name and extension from full path string
function pathToFile(str)
{
    var nOffset = Math.max(0, Math.max(str.lastIndexOf('\\'), str.lastIndexOf('/')));
    var eOffset = str.lastIndexOf('.');
    if(eOffset < 0 && eOffset < nOffset)
    {
        eOffset = str.length;
    }
    return {isDirectory: eOffset === str.length, // Optionally: && nOffset+1 === str.length if trailing slash means dir, and otherwise always file
            path: str.substring(0, nOffset),
            name: str.substring(nOffset > 0 ? nOffset + 1 : nOffset, eOffset),
            extension: str.substring(eOffset > 0 ? eOffset + 1 : eOffset, str.length)};
}

// Testing the function
var testcases = [
    "C:\\blabla\\blaeobuaeu\\testcase1.jpeg",
    "/tmp/blabla/testcase2.png",
    "testcase3.htm",
    "C:\\Testcase4", "/dir.with.dots/fileWithoutDots",
    "/dir.with.dots/another.dir/"
];
for(var i=0;i<testcases.length;i++)
{
    var file = pathToFile(testcases[i]);
    document.write("- " + (file.isDirectory ? "Directory" : "File") + " with name '" + file.name + "' has extension: '" + file.extension + "' is in directory: '" + file.path + "'<br />");
}
</script>
</body>
</html>

Produira les éléments suivants:

  • Le fichier avec le nom 'testcase1' a l'extension: 'jpeg' est dans le répertoire: 'C:\blabla\blaeobuaeu'
  • Le fichier avec le nom 'testcase2' a l'extension: 'png' est dans le répertoire: '/ tmp/blabla'
  • Le fichier avec le nom 'testcase3' a l'extension: 'htm' est dans le répertoire: ''
  • Le répertoire avec le nom 'Testcase4' a l'extension: '' est dans le répertoire: 'C:'
  • Le répertoire avec le nom 'fileWithoutDots' a une extension: '' est dans le répertoire: '/dir.with.dots'
  • Le répertoire avec le nom '' a une extension: '' est dans le répertoire: '/dir.with.dots/another.dir'

Avec && nOffset+1 === str.length ajouté à isDirectory:

  • Le fichier avec le nom 'testcase1' a l'extension: 'jpeg' est dans le répertoire: 'C:\blabla\blaeobuaeu'
  • Le fichier avec le nom 'testcase2' a l'extension: 'png' est dans le répertoire: '/ tmp/blabla'
  • Le fichier avec le nom 'testcase3' a l'extension: 'htm' est dans le répertoire: ''
  • Le répertoire avec le nom 'Testcase4' a l'extension: '' est dans le répertoire: 'C:'
  • Le répertoire avec le nom 'fileWithoutDots' a une extension: '' est dans le répertoire: '/dir.with.dots'
  • Le répertoire avec le nom '' a une extension: '' est dans le répertoire: '/dir.with.dots/another.dir'

Étant donné les cas de test, vous pouvez voir que cette fonction fonctionne de manière assez robuste comparée aux autres méthodes proposées ici.

Remarque pour les débutants sur le caractère \\:\est un caractère d'échappement, par exemple\n signifie une nouvelle ligne et\t un onglet. Pour permettre l’écriture de\n, vous devez taper \\ n.

4
Yeti

Je suppose que vous voulez effacer toutes les extensions, c'est-à-dire /tmp/test/somefile.tar.gz à somefile.

Approche directe avec regex:

var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];

Approche alternative avec opération de regex et tableau:

var filename = filepath.split(/[\\/]/g).pop().split('.')[0];
3
vog

Entrée : C:\path\Filename.ext
Sortie : Filename

Dans le code HTML, définissez la valeur File onChange comme ceci ...

<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>

En supposant que votre identifiant de champ textuel soit 'wpName' ...

<input type="text" name="wpName" id="wpName">

JavaScript 

<script>
  function setfilename(val)
  {
    filename = val.split('\\').pop().split('/').pop();
    filename = filename.substring(0, filename.lastIndexOf('.'));
    document.getElementById('wpName').value = filename;
  }
</script>
2
D T
// HTML
<input type="file" onchange="getFileName(this)">

// JS
function getFileName(input) {
    console.log(input.files[0].name) // With extension
    console.log(input.files[0].name.replace(/\.[^/.]+$/, '')) // Without extension
}

Comment supprimer l'extension

1
Mikel

Aucune des réponses très demandées ne fournit en réalité "juste le nom du fichier sans extension" et les autres solutions sont beaucoup trop de code pour un travail aussi simple.

Je pense que cela devrait être un one-line pour tout programmeur JavaScript. C'est une expression régulière très simple:

function basename(prevname) {
    return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}

Commencez par effacer tout ce que vous voulez jusqu'à la dernière barre oblique.

Ensuite, dépouiller quoi que ce soit après la dernière période, le cas échéant.

C'est simple, c'est robuste, il met en œuvre exactement ce qui est demandé. Est-ce que je manque quelque chose?

1
Jon Watte

Si vous utilisez jQuery alors 

$("#fileupload").val();
0
Rajat Bansal

Aucune des réponses ci-dessus n'a fonctionné pour moi, voici ma solution qui met à jour une entrée désactivée avec le nom de fichier:

<script type="text/javascript"> 
  document.getElementById('img_name').onchange = function () {
  var filePath = this.value;
    if (filePath) {
      var fileName = filePath.replace(/^.*?([^\\\/]*)$/, '$1');
      document.getElementById('img_name_input').value = fileName;
    }
  };
</script>
0
sigi