zoukankan      html  css  js  c++  java
  • 客户端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

    ////////////////////////////////
    ////////Sixi. Let it be.../////
    //////////////////////////////

  • 相关阅读:
    力扣76题、567题、438题、3题(滑动窗口算法)
    【转】#ifndef/#define/#endif使用详解
    【转】为什么要用Source Insight呢?
    【转】list_entry通俗理解方法
    【转】c语言函数定义、函数声明、函数调用以及extern跨文件的变量引用
    【转】GDB attach到一个进程
    【转】Linux cat命令详解
    【转】C语言中“.”与“->”有什么区别?(详解)
    【转】C语言中"."和"->"的区别
    【转】Linux命令详解之–cd命令
  • 原文地址:https://www.cnblogs.com/sixiweb/p/1360774.html
Copyright © 2011-2022 走看看