您如何验证两个 asp:FileUpload 实例以使用 jquery 验证文件？答案

【问题标题】：How do you validate two instances of asp:FileUpload to one to have a file using jquery validate?您如何验证两个 asp:FileUpload 实例以使用 jquery 验证文件？
【发布时间】：2018-02-18 13:59:54
【问题描述】：

我有两个文件上传器来上传 pdf 文件，但我不知道如何将验证限制为至少一个文件上传器。

 $(document).ready(function () {
        $('#form1').validate({
            rules: {
                FileTitle: {
                    required: true,
                    minlength: 2,
                },
                FileDescription: {
            required: true,
            minlength: 2,
            }
            },
            messages: {

            },
            errorPlacement: function (error, element) {

                    error.insertBefore(element);          
            }
        });
    });
</script>

【问题讨论】：

你的页面中是否有两个 asp:FileUpload 控件？您是否要验证以限制仅在您的两个 asp:FileUpload 控件中上传 pdf 文件？
感谢您阅读我的问题。是的，我已经限制了文件类型和大小。我想要发生的是，如果至少应该使用一个 asp:FileUpload 来提交表单。
只需使用其他类型的验证，使用 If else 来检查天气，至少一个控件具有该文件。
@JINOSHAJI 如果您不介意，您能告诉我如何实现吗？我的 Jquery 游戏很弱。

标签： jquery asp.net validation file-upload

【解决方案1】：

只需浏览下面的代码就会有所帮助。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="CS.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <title>Untitled Page</title>
<script type ="text/javascript">
    var validFilesTypes=["pdf"];
    function ValidateFile()
    {
        var isValidFile2 = false;

        var isValidFile = false;
        var label = document.getElementById("<%=Label1.ClientID%>"); 


        var fileValue = $("#<%=FileUpload1.ClientID%>").val(); 
        var fileValue2 = $("#<%=FileUpload2.ClientID%>").val(); 
        if(fileValue=='' && fileValue2==''){
           alert("You should upload atleast one file."); 
           return false;
        }
        console.log("file" );
        console.log("file"+fileValue2);
        if(fileValue!='') 
        { 

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

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



      }
      if(fileValue2!='') 
        { 
       var file2 = document.getElementById("<%=FileUpload2.ClientID%>"); 

      var path2 = file2.value;
      var ext2=path2.substring(path2.lastIndexOf(".")+1,path2.length).toLowerCase();
      for (var i=0; i<validFilesTypes.length; i++)
      { 
        if (ext2==validFilesTypes[i]) 
        {
            isValidFile2=true;
            break;
        }
      }



      }

      if (isValidFile == false && isValidFile2 == false)
      {
          alert("Invalid File. Please upload atleast one File with" +
              " extension:\n\n" + validFilesTypes.join(", ")); 
        label.style.color="red";
        label.innerHTML = "Invalid File. Please upload atleast one File with" + 
         " extension:\n\n"+validFilesTypes.join(", ");
         return false;
      }  


      return true;
     }
</script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" accept="pdf/*.pdf" runat="server" />
         <asp:FileUpload ID="FileUpload2" accept="images/*" runat="server" />
        <asp:Button ID="btnUpload" runat="server" Text="Upload"  
           OnClientClick = "return ValidateFile()" OnClick="btnUpload_Click"  />
        <br />
        <asp:Label ID="Label1" runat="server" Text="" />
    </div>
    </form>
</body>
</html>

【讨论】：

这是您的预期输出吗？
我刚刚完成了测试。这超出了我的预期。感谢您提供限制上传文件的替代方法。非常感谢。