FileUpload使用Javascript检查扩展名是否有效实现思路

通用的检查方法。首先定义好有效的文件扩展名，存放在阵列中。

在JavaScript获取FileUpload控件的文件路径，并取得路径中的文件扩展名。再与阵列中的扩展名比较，如果存在，说明上传的文件是有效的，反之无效。


代码如下:

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="return ValidateFile()" />

上面的HTML的Button按钮有一个OnClientClick事件，那是JavaScript的脚本方法：


代码如下:

<script type="text/javascript">
var validFilesTypes = ["png", "jpg", "jpeg", "gif"];

function ValidateFile() {
var file = document.getElementById("<%=FileUpload1.ClientID%>");
var filePath = file.value;
var ext = filePath.substring(filePath.lastIndexOf(".") + 1, filePath.length).toLowerCase();

var isValidFile = false;
for (var i = 0; i < validFilesTypes.length; i++) {
if (ext == validFilesTypes[i]) {
isValidFile = true;
break;
}
}

if (!isValidFile) {
alert("无效的文件。请上传文件扩展名为：\n\n" + validFilesTypes.join(", "));
}

return isValidFile;
}
</script>

Demo:

赞 (0)

相关推荐

  • js判断上传文件类型判断FileUpload文件类型代码

    asp.net中html标签代码: 复制代码 代码如下: <asp:FileUpload ID="fuMain" runat="server" /> <asp:Button ID="btnUpload" runat="server" OnClientClick="return CheckWorkFile()" Text="上传" /> 普通的html标签: 复制代

  • Extjs的FileUploadField文件上传出现了两个上传按钮

    使用Extjs的FileUploadField插件上传文件,因为FileUploadField是ext的拓展插件所以在其api中是找不到其方法的,这个文件在extjs的examples文件夹下的ux中,所以在使用FileUploadField的时候必须将其引入过来才可以使用,在使用的过程中会出现一个问题就是,在页面中出现了两个上传按钮,这个是和ext的本身css的样式有关系,所以要将样式修改下: 复制代码 代码如下: <style type=text/css> .upload-icon { b

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

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

    为了代码变得更加简捷,笔者使用了正则表达式来获取文件扩展名,如果读者对正则表达式不太了解或者从来没有接触过,请马上恶补一下吧!毕竟它非常重要,大多数的编程语言都支持正则表达式. 大家都知道,后台获取FileUpload扩展名方法: string ext = Path.GetExtension(fu.PostedFile.FileName); JS判断FileUpload控件上传文件的扩展名: <html xmlns="http://www.w3.org/1999/xhtml"&g

  • JS上传组件FileUpload自定义模板的使用方法

    FileUpload 是国外一个纯javascript 写的大文件上传组件,该组件支持分片上传,断点续传,多文件等功能. 下面就为大家分享FileUpload上传组件自定义模板(FineUploaderBasic)的使用方法: 以下是配置代码: 前端配置: <!--定义按钮--> <div id="basic_uploader_fine"><i class="icon-upload icon-white"></i>选择

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • 使用AjaxFileUpload.js实现异步文件上传示例

    ajax是无法提交文件的,所以在上传图片并预览的时候,我们经常使用Ifame的方法实现看似异步的效果.但是这样总不是很方便的,AjaxFilleUpload.js对上面的方法进行了一个包装,使得我们不用去管理Iframe的一系列操作,也不用影响我们的页面结构,实现异步的文件提交. html: 复制代码 代码如下: <input type="file" name="upload" hidden="hidden" id="file_u

  • 使用ajaxfileupload.js实现ajax上传文件php版

    无论是PHP,还是其他的服务端脚本都提供了文件上传功能,实现起来也比较简单.而利用JavaScript来配合,即可实现Ajax方式的文件上传.虽然jQuery本身没有提供这样的简化函数,但有不少插件可以实现.其中,Phpletter.com提供的ajaxfileupload.js是一个轻量的插件,而且编写方式与jQuery提供的全局方法$.post()非常相似,简单易用. 不过,该插件实在太简化了,除了可提供需上传文件的路径外,也就不能传递额外的值到后台服务端.所以,我修改了一下该脚本,增加个一

  • asp.net+ajaxfileupload.js 实现文件异步上传代码分享

    由于代码很简单,这里就闲话不多说了,直接上代码,小伙伴们自己研读代码就明白了. 前台代码: 复制代码 代码如下: /*修改头像*/      //上传      function _sc() {          $(".ckfile").html("").css("color", "#535353");          $("#_userImgPath").val("");     

  • JQuery插件ajaxfileupload.js异步上传文件实例

    在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码 代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script

随机推荐