JavaScript获取本地文件扩展名示例

作者:小括号

时间:2026-10-29

浏览:350

本文介绍如何利用JavaScript获取本地文件域中选中文件的扩展名。通过简单的DOM操作与字符串分割,可在前端实现文件类型合法性预判,适用于上传前的格式校验场景。

文章目录

JavaScript获取本地文件扩展名示例

本文通过一个具体实例,展示如何使用JavaScript获取本地文件的扩展名。该示例供读者参考学习。

利用文件选择域获取指定文件,并提取其扩展名。这一功能可应用于文件上传系统中,用于判断上传文件的类型是否合法,若不合法则禁止上传。代码不足10行,简洁高效,适合正在学习JavaScript的开发者参考。

运行效果见下图:

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程序设计有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章