客户端JS验证fileupload控件,设置只允许特定的文件类型。

服务器端的验证的方法很容易写,我再给出个客户端JS验证的方法。两法并用更好,服务器端验证可以解决客户端禁用JS导致用户绕过验证的问题;客户端JS验证可以减少用户操作的步骤(在提交到服务器之前就已经告诉用户错误信息了),从而获得更好的用户体验。
下面的代码你可以修改成ajax的,当然,你得自己去写后台方法和发送和处理XMLHTTP请求。不过一般用下面的JS和上面各位的服务器验证就已经足够了。
 1 ExpandedBlockStart.gif ContractedBlock.gif     <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Articles_Default2"  %>
 2
 3 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 4
 5 < html  xmlns ="http://www.w3.org/1999/xhtml" >
 6 < head  runat ="server" >
 7      < title > 无标题页 </ title >
 8 ExpandedBlockStart.gifContractedBlock.gif     < script  type ="text/javascript"  language ="javascript" >
 9       
10        function CheckFileType()
11ExpandedSubBlockStart.gifContractedSubBlock.gif        {   
12            var objButton=document.getElementById("Button1");//上传按钮
13            var objFileUpload=document.getElementById('FileUpload1');//FileUpload
14            var objMSG=document.getElementById('msg');//显示提示信息用的DIV
15            var FileName=new String(objFileUpload.value);//文件名
16            var extension=new String (FileName.substring(FileName.lastIndexOf(".")+1,FileName.length));//文件扩展名
17            
18            if(extension=="jpg"||extension=="JPG")//你可以添加扩展名
19ExpandedSubBlockStart.gifContractedSubBlock.gif            {
20                 objButton.disabled=false;//启用上传按钮
21                 objMSG.innerHTML="";
22            }

23            else
24ExpandedSubBlockStart.gifContractedSubBlock.gif            {
25                  objButton.disabled=true;//禁用上传按钮
26                  objMSG.innerHTML="请选择正确的文件文件";
27             }

28        }

29        
30    
31    
</ script >
32 </ head >
33 < body >
34      < form  id ="form1"  runat ="server" >
35      < div >
36      < div  id ="msg" ></ div >
37          < asp:Button  ID ="Button1"  runat ="server"  Text ="上传"  Enabled ="False"   />
38          < br  />
39          < asp:FileUpload  ID ="FileUpload1"  runat ="server"  onChange ="javascript:CheckFileType();"   />
40     
41      </ div >
42      </ form >
43 </ body >
44 </ html >
45
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值