js获得文件扩展名的两种方法

在Web应用中，我们使用tag保存用户输入，主要tag包含textbox、textarea和input file等等，然而输入数据的用户可以上传任何文件格式，所以我们需要在客户端和服务器端验证它。我们作为开发人员知道应该在相应的网页上上传哪个文件扩展名或文件类型。因此，文件验证应该是必要的，为此，我们需要知道上传文件的扩展名。

在本文中，我们将学习如何在javascript（客户端）中获取文件扩展名，以便我们对其进行验证。我们可以使用两种不同的方法来实现。

两种获得文件扩展名的方法：

使用正则表达式（Regex）获得文件类型
使用 split() 和 pop() 方法获得文件类型

HTML标记：

这里我们添加一个表单标签，带有文件上传控件和按钮标签。在按钮单击时，我们调用 getFileExtention() 方法，该方法提供警报消息并显示上载文件的扩展名。代码如下所示。

<form action="/uploadFile">
<input id="myFile" type="file" name="file">
<button onclick="fnGetExtension()">获得扩展名</button>
</form>

方法1：使用正则表达式（Regex）获取文件扩展名

这里我们有正则表达式（Regex）值，它给我们文件扩展名。即使URL包含 ?foo=123 查询字符串或 #hash 值，此正则表达式也可用于从URL中提取文件扩展名。

Javascript代码：

function fnGetExtension() {
//通过id获得文件输入元件
var fileInput = document.getElementById('myFile');
//获得文件名
var fileName = fileInput.files[0].name;

//文件扩展名的正则表达式
var patternFileExtension = /.([0-9a-z]+)(?:[?#]|$)/i;

//获得文件扩展名
var fileExtension = (fileName).match(patternFileExtension);
alert(fileExtension);
}

execcode getcode

方法2：使用 split() 和 pop() 方法获得文件扩展名

这里我们使用 split() 方法和使用一个 点 (.) 来分割，以及使用 pop() 方法获得文件扩展名。

Javascript代码：

function fnGetExtension() {
//通过id获得文件输入元件
var fileInput = document.getElementById('myFile');
//获得文件名
var fileName = fileInput.files[0].name;

//获得文件扩展名
var fileExtension = fileName.split('.').pop();
alert(fileExtension);
}

execcode getcode

结论：

这里我们已经展示了如何在javascript中使用和不使用正则表达式来获取文件扩展名，我们可以在上传文件时用于文件验证。

#知识扩展

JavaScript split() 方法

定义和用法

split() 方法用于把一个字符串分割成字符串数组。

语法

stringObject.split(separator,howmany)

参数	描述
separator	必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。