本文介绍如何利用JavaScript获取本地文件域中选中文件的扩展名。通过简单的DOM操作与字符串分割,可在前端实现文件类型合法性预判,适用于上传前的格式校验场景。
JavaScript获取本地文件扩展名示例
本文通过一个具体实例,展示如何使用JavaScript获取本地文件的扩展名。该示例供读者参考学习。
利用文件选择域获取指定文件,并提取其扩展名。这一功能可应用于文件上传系统中,用于判断上传文件的类型是否合法,若不合法则禁止上传。代码不足10行,简洁高效,适合正在学习JavaScript的开发者参考。
运行效果见下图:

在线演示地址如下:
http://demo.jb51.net/js/2015/js-view-nav-file-ext-codes/
具体代码如下:
<html>
<head>
<title>取得文件字段中选取文件的扩展名</title>
<script language="javascript">
<!--
function getFilename(){
str = new Array();
filename = form1.file.value;
str = filename.split(".");
extname = str[str.length - 1];
alert(extname);
}
//-->
</script>
</head>
<body>
<form enctype="multipart/form-data" name="form1">
<input type="file" name="file">
<input type="button" value="显示扩展名" onClick="getFilename()">
</form>
</body>
</html>
希望本文所述内容对大家的JavaScript程序设计有所帮助。