Javascript - Comment extraire le nom de fichier d'un contrôle d'entrée de fichier

StackOverflow https://stackoverflow.com/questions/857618

  •  21-08-2019
  •  | 
  •  

Question

Lorsqu'un utilisateur sélectionne un fichier dans une page web, je veux être en mesure d'extraire simplement le nom du fichier.

J'ai essayé fonction str.search mais il semble échouer lorsque le nom du fichier est quelque chose comme ceci: c:. \ Upload \ ilike.this.file.jpg

Comment peut-on extraire simplement le nom du fichier sans extension?

Était-ce utile?

La solution

En supposant que votre a une id télécharger cela devrait nous l'espérons faire l'affaire: 

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

Autres conseils

Pour diviser la chaîne ({filepath} / {nom}) et obtenir le nom de fichier que 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 cet   valeur à l'appelant « .    MOZILLA DÉVELOPPEUR RESEAU

Exemple:

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

vous obtenez: "file.txt"

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

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

Très simple 

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

En supposant: 

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

Le JavaScript serait: 

var fileName = document.getElementById('theFile').files[0].name;

var pieces = str.split('\\');
var filename = pieces[pieces.length-1];

Je viens de faire ma propre version de cela. Ma fonction peut être utilisée pour extraire tout ce que vous voulez à partir, si vous n'avez pas besoin de tout cela, alors vous pouvez facilement supprimer un 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>

Affichera les éléments suivants:

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

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

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

Compte tenu des cas de test, vous pouvez voir cette fonction fonctionne très robuste par rapport aux autres méthodes proposées ici.

Note pour les débutants sur le \\: \ est un caractère d'échappement, par exemple \ n signifie une nouvelle ligne et \ t un onglet. Pour permettre d'écrire \ n, vous devez taper \\ n réellement.

Je suppose que vous souhaitez supprimer toutes les extensions, à savoir à /tmp/test/somefile.tar.gz somefile.

Approche directe avec regex: 

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

Approche alternative avec le fonctionnement regex et tableau: 

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

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

Dans le code HTML, définissez la valeur du fichier onChange comme ça ... 

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

En supposant que votre identifiant textfield est '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>

Aucune des réponses très upvoted fournissent en fait « juste le nom du fichier sans extension » et les autres solutions sont le code beaucoup trop pour un travail simple.

Je pense que cela devrait être une seule ligne à tout programmeur JavaScript. Il est une expression régulière très simple: 

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

Tout d'abord, la bande quoi que ce soit jusqu'à la dernière barre oblique, le cas échéant.

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

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

// 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

Aucune des réponses ci-dessus travaillé pour moi, voici ma solution qui met à jour une entrée désactivée avec le nom du 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>

Si vous utilisez jQuery puis 

$("#fileupload").val();
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top