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

服务器端的验证的方法很容易写，我再给出个客户端JS验证的方法。两法并用更好，服务器端验证可以解决客户端禁用JS导致用户绕过验证的问题；客户端JS验证可以减少用户操作的步骤（在提交到服务器之前就已经告诉用户错误信息了），从而获得更好的用户体验。
下面的代码你可以修改成ajax的，当然，你得自己去写后台方法和发送和处理XMLHTTP请求。不过一般用下面的JS和上面各位的服务器验证就已经足够了。
 1   <%@ 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    <script type="text/javascript" language="javascript">
 9       
10        function CheckFileType()
11        {   
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")//你可以添加扩展名
19            {
20                 objButton.disabled=false;//启用上传按钮
21                 objMSG.innerHTML="";
22            }
23            else
24            {
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

posted on 2008-12-23 17:57  sixiiweb  阅读(5340)  评论(1)    收藏  举报

导航