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

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

我尝试了 str.search 函数，但是当文件名如下所示时，它似乎失败了。

如何只提取没有扩展名的文件名？

366038 次浏览
小开 
var pieces = str.split('\\');
var filename = pieces[pieces.length-1];
小开
最佳答案

假设你的 < 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);
}
小开

要分割字符串({ filepath }/{ filename })并获得文件名，可以使用如下方法:

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

”pop 方法从数组中删除最后一个元素并返回 对呼叫者有价值”
Mozilla Developer Network

例如:

发信人: "/home/user/file.txt".split(/(\\|\/)/g).pop()

你得到: "file.txt"

小开

我刚做了我自己的版本。我的函数可以用来提取任何你想从它，如果你不需要它的全部，那么你可以很容易地删除一些代码。

<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.dot’中
  • 具有扩展名“的目录位于目录:’/dir.with.dot/another. dir’中

在 isDirectory中加入 && nOffset+1 === str.length:

  • 名为‘ testcase1’的文件有扩展名: ‘ jpeg’在目录中: ‘ C: blabla blaeobuaeu’
  • 名为‘ testcase2’的文件扩展名为: ‘ png’在目录中: ‘/tmp/blabla’
  • 名为‘ testcase3’的文件扩展名为: ‘ htm’在目录中:”
  • 名为‘ Testcase4’的目录有扩展名:”在目录中: ‘ C:’
  • 名为‘ fileWithoutDots’的目录扩展名为:”位于目录:’/dir.with.dot’中
  • 具有扩展名“的目录位于目录:’/dir.with.dot/another. dir’中

通过测试用例，您可以看到与这里提出的其他方法相比，这个函数工作得非常稳健。

新手需要注意: 是一个转义字符，例如 n 表示换行符和 t 表符。要写入 n，实际上必须键入 n。

小开

我假设您想去掉所有的扩展，例如 /tmp/test/somefile.tar.gz到 somefile。

使用 regex 的直接方法:

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

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

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

这两个高度赞成的答案实际上都没有提供“只有文件名没有扩展名”，其他的解决方案对于这样一个简单的工作来说代码太多了。

我认为对于任何 JavaScript 程序员来说，这都应该是一个简单的代码，它是一个非常简单的正则表达式:

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

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

然后，如果有的话，在最后一节之后把任何东西都剥掉。

它很简单，很强大，它能完全满足我的要求，我是不是漏掉了什么？

小开

如今，有一种简单得多的方式:

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

很简单

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

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

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

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

以上的答案对我来说都不起作用，下面是我的解决方案，它使用文件名更新一个禁用的输入:

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

如果你正在使用 jQuery，那么

$("#fileupload").val();
小开 
// 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
}

如何删除扩展名

小开

假设:

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

JavaScript 应该是:

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

简易方法:

JQuery

$("#fileInputId").on("change", () => {
alert($("#fileInputId")[0].files[0].name);
});

JavaScript

document.getElementById("fileInputId").onchange = function() {
alert(document.getElementById("fileInputId").files[0].name)
};

提交答案