JavaScript判断FileUpload控件上传文件类型

 更新时间:2022年02月23日 16:57:22   投稿:lijiao  
在CS后台代码中获取FileUpload控件上传文件的类型是比较容易的!那么,能否在客户端通过JavaScript脚本判断FileUpload上传文件类型呢?答案是可以的,下面通过一个小例子为大家展示

为了代码变得更加简捷,笔者使用了正则表达式来获取文件扩展名,如果读者对正则表达式不太了解或者从来没有接触过,请马上恶补一下吧!毕竟它非常重要,大多数的编程语言都支持正则表达式。

大家都知道,后台获取FileUpload扩展名方法:

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

JS判断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 实例效果图:

更多精彩内容请参考专题《ajax上传技术汇总》《javascript文件上传操作汇总》《jQuery上传操作汇总》进行学习。

以上就是JS判断FileUpload控件上传文件的扩展名的实现方法,希望对大家的学习有所帮助。

相关文章

  • js获取所有checkbox的值的简单实例

    js获取所有checkbox的值的简单实例

    下面小编就为大家带来一篇js获取所有checkbox值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript关于某元素点击事件的监听和触发

    JavaScript关于某元素点击事件的监听和触发

    本文主要介绍了JavaScript关于某元素点击事件的监听和触发,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 微信小程序实现同一页面取值的方法分析

    微信小程序实现同一页面取值的方法分析

    这篇文章主要介绍了微信小程序实现同一页面取值的方法,结合实例形式分析了微信小程序在同一页面取值的常见情况与具体操作技巧,需要的朋友可以参考下
    2019-04-04
  • 原生JS实现Ajax跨域请求flask响应内容

    原生JS实现Ajax跨域请求flask响应内容

    这篇文章主要为大家详细介绍了JS实现Ajax跨域请求flask响应内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • JS实现Tab栏切换的两种方式案例详解

    JS实现Tab栏切换的两种方式案例详解

    这篇文章主要介绍了JS实现Tab栏切换的两种方式,一种是面向过程的写法,一种是面向对象的写法,本文给大家分享详细案例代码,需要的朋友可以参考下
    2022-08-08
  • ES6入门教程之let和const命令详解

    ES6入门教程之let和const命令详解

    最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉。通过学习网上的教程后觉着有必要整理下遇到的let和const命令,所以这篇文章主要给大家介绍了ES6中let和const命令的相关资料,需要的朋友可以参考下。
    2017-05-05
  • JS弹出窗口的运用与技巧大全

    JS弹出窗口的运用与技巧大全

    本篇文章主要介绍了JS弹出窗口的运用与技巧大全,详解介绍了几种利用网页弹出各种形式的窗口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • JavaScript实现解析INI文件内容的方法

    JavaScript实现解析INI文件内容的方法

    这篇文章主要介绍了JavaScript实现解析INI文件内容的方法,结合实例形式分析了javascript通过自定义函数实现针对ini文件解析操作的相关处理技巧,需要的朋友可以参考下
    2016-11-11
  • JavaScript的基础语法和数据类型详解

    JavaScript的基础语法和数据类型详解

    这篇文章主要介绍了JavaScript的基础语法和数据类型,保姆级的详细教程,万字长文详细的列出了JavaScript的各种语法,建议收藏系列,希望可以有所帮助
    2021-09-09
  • JavaScript函数式编程示例分析

    JavaScript函数式编程示例分析

    函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。 可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果
    2022-10-10

最新评论