Lorsqu'un utilisateur sélectionne un fichier dans une page Web, je souhaite pouvoir extraire uniquement le nom du fichier.
J'ai essayé la fonction str.search mais cela 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?
Réponses:
En supposant que votre <input type = "file"> a un identifiant de téléchargement, cela devrait, espérons-le, 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);
}filename = filename.substring(0, filename.lastIndexOf('.'));Parce que son chemin échouera avec des extensions de plus de 3 caractères, donc: .html, .jpeg etc.
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
Pour diviser la chaîne ({filepath} / {filename}) 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 cette valeur à l'appelant."
Réseau de développeurs Mozilla
Exemple:
de: "/home/user/file.txt".split(/(\\|\/)/g).pop()
vous obtenez: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]. De plus, il a également été demandé de supprimer l'extension de fichier. Pour une solution complète, voir: stackoverflow.com/a/32156800/19163
De nos jours, il existe un moyen beaucoup plus simple:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;fileInput.files.lengthavant d'appeler .name, au cas où l'utilisateur clique sur Annuler.
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];Je suppose que vous voulez supprimer toutes les extensions, c'est- /tmp/test/somefile.tar.gzà- dire à somefile.
Approche directe avec regex:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];Approche alternative avec regex et opération de tableau:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];Je viens d'en faire ma propre version. Ma fonction peut être utilisée pour en extraire tout ce que vous voulez, si vous n'avez pas besoin de tout cela, 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>Sortira ce qui suit:
Avec && nOffset+1 === str.lengthajouté à isDirectory:
Compte tenu des cas de test, vous pouvez voir que cette fonction fonctionne de manière assez robuste par rapport aux autres méthodes proposées ici.
Remarque pour les débutants à propos de \\: \ est un caractère d'échappement, par exemple \ n signifie une nouvelle ligne et \ ta tab. Pour permettre d'écrire \ n, vous devez en fait taper \\ n.
&& eOffset < nOffset).
Entrée : C:\path\Filename.ext
Sortie :Filename
Dans le code HTML, définissez la onChangevaleur File comme ceci ...
<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>En supposant que votre identifiant de champ de texte 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 fortement votées ne fournit réellement "juste le nom de fichier sans extension" et les autres solutions sont beaucoup trop de code pour un travail aussi simple.
Je pense que cela devrait être une ligne unique pour tout programmeur JavaScript. C'est une expression régulière très simple:
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}Commencez par supprimer tout élément jusqu'à la dernière barre oblique, le cas échéant.
Ensuite, dépouillez quoi que ce soit après les dernières règles, 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?
// 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
}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>Si vous utilisez jQuery alors
$("#fileupload").val();