文件扩展名是文件的结尾，可识别不同操作系统中的文件类型。
在本教程的范围内，我们将讨论如何使用 JavaScript 获取文件扩展名。
其中我们为我们推荐了一些单线和扩展的解决方案。
一个非常简单的解决方案：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>选择一个文件并单击按钮以检查文件扩展名。</h2>
<div>
<input type="file" id="chooseFile" />
<input type="button" value="Check Extension" onclick="checkFileExtension();" />
</div>
<h3>
文件扩展名是：
<p class="output"></p>
</h3>
<script>
function checkFileExtension() {
fileName = document.querySelector('#chooseFile').value;
extension = fileName.split('.').pop();
document.querySelector('.output').textContent = extension;
};
</script>
</body>
</html>
这是一个可以正常工作的非正则表达式解决方案：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>选择一个文件并查看扩展名</h2>
<div>
<input type="file" id="chooseFile" />
<input type="button" value="Check Extension" onclick="checkFileExtension();" />
</div>
<h3>
文件的扩展名是：
<p class="output"></p>
</h3>
<script>
function checkFileExtension() {
fileName = document.querySelector('#chooseFile').value;
extension = fileName.substring(fileName.lastIndexOf('.') + 1);
document.querySelector('.output').textContent = extension;
};
</script>
</body>
</html>
一个具有另外全路径支持的清晰解决方案，这是一个扩展版本：
function getExtension(path) {
let baseName = path.split(/[\/]/).pop(), //从完整路径中提取文件名
//(supports separators `\` and `/`)
pos = baseName.lastIndexOf("."); //获取最后一个点的位置
if (baseName === "" || pos < 1) //如果文件名为空或者是 ...
return ""; //如果没有点(-1) 或者点是第一个(0)
return baseName.slice(pos + 1); //提取扩展名，忽略 "."
}
console.log(getExtension("/path/to/fileName.ext")); //"ext"
另一个足够短的快速解决方案可以用于批量操作，并且肯定会节省另外的字节：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>选择一个文件并查看扩展名</h2>
<div>
<input type="file" id="chooseFile" />
<input type="button" value="Check Extension" onclick="checkFileExtension();" />
</div>
<h3>
The file extension is a:
<p class="output"></p>
</h3>
<script>
function checkFileExtension() {
fileName = document.querySelector('#chooseFile').value;
extension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
document.querySelector('.output').textContent = extension;
};
</script>
</body>
</html>
这是另一个单行非正则表达式解决方案：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Select a file and click on the button to check the file extension.</h2>
<div>
<input type="file" id="chooseFile" />
<input type="button" value="Check Extension" onclick="checkFileExtension();" />
</div>
<h3>
文件的扩展名是：
<p class="output"></p>
</h3>
<script>
function checkFileExtension() {
fileName = document.querySelector('#chooseFile').value;
extension = fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
document.querySelector('.output').textContent = extension;
};
</script>
</body>
</html>
这两个单行可以正确使用没有扩展名的名称，例如 myfile，或者以点 (.) 开头，例如 .htaccess：
"" --> "" "name" --> "" "name.txt" --> "txt" ".htpasswd" --> "" "name.with.many.dots.myext" --> "myext"
- String.lastIndexOf 方法返回给定字符串 fname 中子字符串 (".") 的最后一个位置。
如果未找到子字符串，该方法将返回 -1.
- 文件名中点的“不可接受”位置是 -1 和 0，它们指的是没有扩展名的名称（“name”）和以点开头的名称（“.htaccess”）。
- String.prototype.slice 方法从计算出的位置取出文件名的一部分。
如果位置编号大于字符串方法的长度，该方法将返回“”。
给定的扩展方法比上面的两个单行方法慢；然而，扩展的更容易捕捉。
日期：2020-06-02 22:16:19 来源：oir作者：oir