JavaScript 如何获取文件扩展名

使用JavaScript获取文件扩展名有很多方法。最常用的方法有：
split()和pop()方法
substring()和lastIndexOf()方法
match()方法与正则表达式

上述方法将逐一介绍，附带适当的示例。

使用`split()`和`pop()`方法

首先通过选择文件输入框并获取其value属性来获取完整的文件名。这将返回文件名作为一个字符串。

通过split()方法的帮助，我们将文件名拆分成两部分。第一部分是文件名，第二部分是文件的扩展名。

扩展名可以通过使用pop()方法从数组中弹出最后一个字符串来获取。因此，这是所选文件的文件扩展名。

语法：

fileName.split(separator, limit).pop();

示例：

<!DOCTYPE html> 
<html> 

<head> 
    <title>How to get file extensions using JavaScript? </title> 
</head> 

<body style="text-align: center;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <b>Here we will get "Extension" of selected file</b> 
    <p>Select a file and click on the button 
    to check the file extension.</p> 
    <form> 
        <input type="file" id="file1" /> 
        <input type="button" value="Check Extension"
                            onclick="checkFileExtension();"/> 
    </form> 
    <p>The file extension is: <span class="output"></span></p> 
    <script language="javascript"> 
        function checkFileExtension() { 
            fileName = document.querySelector('#file1').value; 
            extension = fileName.split('.').pop(); 
            document.querySelector('.output') 
                                    .textContent = extension; 
        }; 
    </script> 
</body> 

</html>

输出：

JavaScript 如何获取文件扩展名

使用substring()和lastIndexOf()方法

首先获取完整的文件名，然后使用substring()方法返回字符串中开始和结束索引之间的部分。

使用lastIndexOf()方法获取起始索引。该方法返回字符串中传递的最后一次出现的位置的索引。将句点(.)传递给该方法可以找到最后一个索引。将该索引传递给substring()方法，该方法从句点(.)到末尾返回字符串。这就是文件扩展名。

语法：

fileName.substring(fileName.lastIndexOf(searchvalue, start);

示例：

<!DOCTYPE html> 
<html> 

<head> 
    <title>How to get file extensions using JavaScript? </title> 
</head> 

<body style="text-align: center;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <b>Here we will get "Extension" of selected file</b> 
    <p>Select a file and click on the button 
        to check the file extension.</p> 
    <form> 
        <input type="file" id="file1" /> 
        <input type="button" value="Check Extension"
                            onclick="checkFileExtension();" /> 
    </form> 
    <p>The file extension is: <span class="output"></span></p> 
    <script language="javascript"> 
        function checkFileExtension() { 
            fileName = document.querySelector('#file1').value; 
            extension = fileName.substring(fileName.lastIndexOf('.') + 1); 
            document.querySelector('.output') 
                                    .textContent = extension; 
        }; 
    </script> 
</body> 

</html>

输出：

JavaScript 如何获取文件扩展名

match() 方法与正则表达式

正则表达式可以用于从完整的文件名中提取文件扩展名。使用正则表达式[^.]+$创建了一个新的 RegExp 对象。插入符(^)标记了字符串的开头。插入符后面的句点(.)指定了句点后的字符串被选择。加号(+)量词选择一个或多个字符。美元符($)用于指定行尾。这个表达式选择了句点后的字符串。

match() 方法用于返回与作为参数传递给它的正则表达式匹配的字符串部分。完整的文件名被传递给此方法，正则表达式仅返回文件扩展名。

语法：

fileName = document.querySelector('#file1').value;
regex = new RegExp('[^.]+$');
extension = fileName.match(regex);

示例：

<!DOCTYPE html> 
<html> 

<head> 
    <title>How to get file extensions using JavaScript? </title> 
</head> 

<body style="text-align: center;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <b>Here we will get "Extension" of selected file</b> 
    <p>Select a file and click on the button 
        to check the file extension.</p> 
    <form> 
        <input type="file" id="file1" /> 
        <input type="button" value="Check Extension"
                            onclick="checkFileExtension();"/> 
    </form> 
    <p>The file extension is: <span class="output"></span></p> 
    <script language="javascript"> 
        function checkFileExtension() { 
            fileName = document.querySelector('#file1').value; 

            regex = new RegExp('[^.]+$'); 

            extension = fileName.match(regex); 
            document.querySelector('.output') 
                                    .textContent = extension; 
        }; 
    </script> 
</body> 

</html>

输出：

JavaScript 如何获取文件扩展名