当用户在网页中选择文件时，我希望能够仅提取文件名。
我确实尝试了 str.search 功能，但是当文件名如下时它似乎失败了：c:\uploads\ilike.this.file.jpg。
我们如何只提取没有扩展名的文件名？
问问题
330966 次
15 回答
227
要拆分字符串 ({filepath}/{filename}) 并获取文件名，您可以使用如下内容：
str.split(/(\\|\/)/g).pop()
“pop 方法从数组中删除最后一个元素并将该值返回给调用者。”
Mozilla 开发者网络
例子：
从："/home/user/file.txt".split(/(\\|\/)/g).pop()
你得到："file.txt"
于 2012-02-10T21:15:01.773 回答
145
假设您的<input type="file" >有一个上传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);
}
于 2009-05-13T12:24:23.817 回答
130
现在有一个更简单的方法：
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;
于 2016-11-05T14:52:47.430 回答
41
非常简单
let file = $("#fileupload")[0].files[0];
file.name
于 2016-12-15T20:38:35.467 回答
26
假设：
<input type="file" name="file1" id="theFile">
JavaScript 将是：
var fileName = document.getElementById('theFile').files[0].name;
于 2018-03-09T23:56:29.800 回答
8
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
于 2009-05-13T12:20:03.933 回答
8
我假设您想删除所有扩展名，/tmp/test/somefile.tar.gz即somefile.
使用正则表达式的直接方法：
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];
正则表达式和数组操作的替代方法：
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];
于 2015-08-22T13:41:36.683 回答
4
我刚刚制作了我自己的版本。我的函数可以用来从中提取你想要的任何东西，如果你不需要全部，那么你可以很容易地删除一些代码。
<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 表示换行符和 \ta 制表符。为了能够写入 \n，您必须实际键入 \\n。
于 2012-05-10T16:38:56.887 回答
4
输入：C:\path\Filename.ext
输出：Filename
在 HTML 代码中，像这样设置 FileonChange值...
<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>
假设您的文本字段 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>
于 2017-06-26T05:34:34.743 回答
3
两个高度赞成的答案实际上都没有提供“只是没有扩展名的文件名”，而其他解决方案对于这样一个简单的工作来说代码太多了。
我认为这应该是任何 JavaScript 程序员的单行代码。这是一个非常简单的正则表达式：
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}
首先，将任何内容剥离到最后一个斜线（如果存在）。
然后，在最后一个时期之后剥离任何东西（如果存在）。
它很简单，它很健壮，它完全实现了所要求的。我错过了什么吗？
于 2016-05-21T19:45:02.420 回答
1
// 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
}
于 2018-03-07T13:33:33.093 回答
1
var path = document.getElementById('upload').value;//take path
var tokens= path.split('\\');//split path
var filename = tokens[tokens.length-1];//take file name
于 2019-10-16T10:15:05.463 回答
0
以上答案都不适合我，这是我的解决方案，它使用文件名更新禁用的输入：
<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>
于 2017-09-27T08:16:12.170 回答
0
//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)
于 2020-12-05T00:16:00.957 回答
-3
如果您使用的是 jQuery，那么
$("#fileupload").val();
于 2018-02-07T10:11:14.243 回答