JavaScript 实现前端文件后缀名合法性校验

作者:小括号时间:2026-10-30 04:17:30浏览:160

本文介绍如何使用 JavaScript 在前端判断上传文件的后缀名是否合法。通过获取文件名并提取扩展名,与预设的允许列表(如 jpg、png、gif)进行比对,从而提示用户文件类型是否合法或错误。

JavaScript 文件后缀名校验实现

本文展示了一段关于使用 JavaScript 判断上传文件后缀名是否合法的完整代码示例,供读者参考学习。

运行效果如下图所示:

用户点击选择文件按钮。

JavaScript 文件后缀名校验实现

用户选择名为 1.jpg 的文件。

JavaScript 文件后缀名校验实现

系统提示文件类型合法,上传成功。

JavaScript 文件后缀名校验实现

若选择的文件后缀不在允许范围内,则判定为不合法操作。

具体实现代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>判断文件上传是否合法</title>
<script type="text/javascript">
//3、(字符)检查文件上传表单控件,如果含有[jpg,jpeg,gif,png]则显示“文件类型合法”,否则“显示文件类型错误”

function checkFileExt(filename)
{
 var flag = false; //状态
 var arr = ["jpg","png","gif"];
 //取出上传文件的扩展名
 var index = filename.lastIndexOf(".");
 var ext = filename.substr(index+1);
 //循环比较
 for(var i=0;i<arr.length;i++)
 {
  if(ext == arr[i])
  {
   flag = true; //一旦找到合适的,立即退出循环
   break;
  }
 }
 //条件判断
 if(flag)
 {
  document.write("文件名合法");
 }else
 {
  document.write("文件名不合法");
 }
}

</script>
</head>

<body>
<form name="form1" method="post" enctype="multipart/form-data">
上传头像:<input type="file" name="uploadFile" onchange="checkFileExt(this.value)" />
</form>
<input type="button" value="返回上一页" onclick="javascript:history.go(-1)" />
</body>
</html>

希望上述内容能帮助读者更好地理解 JavaScript 程序设计。

作者最新文章