JavaScript 验证 FileUpload 控件上传文件类型

作者:闭包旅人

时间:2026-10-29

浏览:443

本文介绍如何利用 JavaScript 正则表达式在前端判断 FileUpload 控件上传文件的扩展名。通过匹配文件路径获取后缀,并与指定类型(如 zip)进行比对,实现简单的客户端文件类型校验,防止用户提交不符合要求的文件。

文章目录

JavaScript 验证 FileUpload 控件上传文件类型

为了使代码更加简洁,这里采用正则表达式来提取文件的扩展名。如果读者对正则表达式尚不熟悉或未曾接触,建议尽快学习相关知识,因为它是多数编程语言都支持的重要工具。

通常,后台获取 FileUpload 控件扩展名的方法如下:


string ext = Path.GetExtension(fu.PostedFile.FileName);

接下来介绍如何使用 JavaScript 判断 FileUpload 控件所上传文件的扩展名:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>JS判断文件类型-乐猪网</title>
 <script type="text/javascript">
 function CheckFileUpload() {
  var obj = document.getElementById('fu');
  if (obj.value == "") {
  alert("请选择要上传的文件!");
  return false;
  }
  var stuff = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3];
  if (stuff != "zip") {
  alert("文件类型不正确,请选择.zip文件!");
  return false;
  }
  return true;
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:FileUpload ID="fu" runat="server" />
 <asp:Button ID="btnSave" runat="server" Text="保存"
 OnClientClick="return CheckFileUpload();" />
 </div>
 </form>
</body>
</html>

FileUpload 控件的实际运行效果如图所示:

JavaScript 验证 FileUpload 控件上传文件类型

如需了解更多相关内容,可参考专题《ajax上传技术汇总》、《javascript文件上传操作汇总》以及《jQuery上传操作汇总》。

上述内容即为利用 JS 判断 FileUpload 控件上传文件扩展名的具体实现方式,希望能为读者提供有益的帮助。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章