JavaScript获取本地文件扩展名示例
作者:小括号时间:2026-10-29 13:58:31浏览:349
本文介绍如何利用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程序设计有所帮助。
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
