Question

当用户选择网页中的文件时，我希望能够只提取文件名。

我确实尝试过str.search函数，但是当文件名是这样的时候似乎失败了： c：\ uploads \ ilike.this.file.jpg 。

如何在没有扩展名的情况下提取文件名？

Answer 1

要分割字符串（{filepath} / {filename}）并获取文件名，您可以使用以下内容：

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

“pop方法从数组中删除最后一个元素并返回该元素给来电者一个价值。“ MOZILLA DEVELOPER NETWORK

示例：

来自："/home/user/file.txt".split(/(\\|\/)/g).pop()

你得到："file.txt"

Answer 2

假设您的＆lt; input type =“file”＆gt; 的ID为上传，这应该可以解决这个问题：

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

Answer 3

现在有一种更简单的方式：

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

Answer 4

非常简单

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

Answer 5

假设：

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

JavaScript将是：

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

Answer 6

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

Answer 7

我刚刚制作了自己的版本。我的函数可以用来从中提取你想要的东西，如果你不需要它，那么你可以轻松删除一些代码。

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

将输出以下内容：

名称为'testcase1'的文件有扩展名：'jpeg'在目录中：'C：\ blabla \ blaeobuaeu'
名称为'testcase2'的文件有扩展名：'png'在目录中：'/ tmp / blabla'
名称为'testcase3'的文件有扩展名：'htm'在目录中：''
名称为“Testcase4”的目录具有扩展名：''位于目录中：'C：'
名称为'fileWithoutDots'的目录有扩展名：''在目录中：'/ dir.with.dots'
名称为''的目录有扩展名：''在目录中：'/ dir.with.dots / another.dir'

将&& nOffset+1 === str.length添加到isDirectory：

名称为'testcase1'的文件有扩展名：'jpeg'在目录中：'C：\ blabla \ blaeobuaeu'
名称为'testcase2'的文件有扩展名：'png'在目录中：'/ tmp / blabla'
名称为'testcase3'的文件有扩展名：'htm'在目录中：''
名称为“Testcase4”的目录具有扩展名：''位于目录中：'C：'
名称为'fileWithoutDots'的目录有扩展名：''在目录中：'/ dir.with.dots'
名称为''的目录有扩展名：''在目录中：'/ dir.with.dots / another.dir'

鉴于测试用例，您可以看到此功能与此处提出的其他方法相比非常有效。

有关\\：\的新手的注意事项是转义字符，例如\ n表示换行符和\ t表示选项卡。为了能够编写\ n，您必须实际输入\\ n。

Answer 8

我假设您要删除所有扩展名，即/tmp/test/somefile.tar.gz到somefile。

使用正则表达式进行直接处理：

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

使用正则表达式和数组操作的替代方法：

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

Answer 9

输入：C:\path\Filename.ext
输出：Filename

在HTML代码中，像这样设置文件onChange ...

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

假设您的textfield id是'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>

Answer 10

这两个高度赞成的答案实际上都没有提供＆＃34;只是没有扩展名的文件名＆＃34;而其他解决方案对于这么简单的工作来说代码太多了。

我认为这应该是任何JavaScript程序员的一线。这是一个非常简单的正则表达式：

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

首先，将任何内容删除到最后一个斜杠（如果存在）。

然后，在最后一段时间之后剥离任何东西，如果存在的话。

它很简单，很强大，它完全符合所要求的。我错过了什么吗？

Answer 11

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

How to remove the extension

Answer 12

上述答案都不适用于我，这是我的解决方案，用文件名更新已禁用的输入：

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

Answer 13

如果您使用的是jQuery，那么

$("#fileupload").val();

Answer 14

var path = document.getElementById('upload').value;//take path
var tokens= path.split('\\');//split path
var filename = tokens[tokens.length-1];//take file name

Answer 15

//x=address or src
if(x.includes('/')==true){xp=x.split('/')} //split address
if(x.includes('\\')==true){xp=x.split('\\')} //split address
xl=xp.length*1-1;xn=xp[xl] //file==xn
xo=xn.split('.'); //file parts=xo
if(xo.lenght>2){xol=xo.length-1;xt=xo[xol];xr=xo.splice(xol,1);
xr=xr.join('.'); // multiple . in name
}else{
xr=xo[0]; //filename=xr
xt=xo[1]; //file ext=xt
}
xp.splice(xl,1); //remove file
xf=xp.join('/'); //folder=xf , also corrects slashes

//result
alert("filepath: "+x+"\n folder: "+xf+"("+xl+")\n file: "+xn+"\n filename: "+xr+"\n .ext:  "+xt)

Javascript - 如何从文件输入控件中提取文件名

15 个答案: