在Web应用中，我们使用tag保存用户输入，主要tag包含textbox、textarea和input file等等，然而输入数据的用户可以上传任何文件格式，所以我们需要在客户端和服务器端验证它。 我们作为开发人员知道应该在相应的网页上上传哪个文件扩展名或文件类型。 因此，文件验证应该是必要的，为此，我们需要知道上传文件的扩展名。
在本文中，我们将学习如何在javascript（客户端）中获取文件扩展名，以便我们对其进行验证。 我们可以使用两种不同的方法来实现。
两种获得文件扩展名的方法：
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);
}
方法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);
}
结论：
这里我们已经展示了如何在javascript中使用和不使用正则表达式来获取文件扩展名，我们可以在上传文件时用于文件验证。
#知识扩展
JavaScript split() 方法
定义和用法
split() 方法用于把一个字符串分割成字符串数组。
语法
stringObject.split(separator,howmany)
| 参数 | 描述 |
|---|---|
| separator | 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。 |
| howmany | 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 |
返回值
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。
提示和注释
注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。
JavaScript pop() 方法
定义和用法
pop() 方法用于删除并返回数组的最后一个元素。
语法
arrayObject.pop()
返回值
arrayObject 的最后一个元素。
说明
pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
发表评论