如何在文件上传控件中选择最少三个文件

Posted 2023-04-13

【中文标题】如何在文件上传控件中选择最少三个文件

【英文标题】：How to select minimum three file in file upload control

【发布时间】：2020-02-04 04:46:21

【问题描述】：

如何在多文件上传控件中选择最少三个文件

我应该添加 AJAX 文件上传控制工具包

我想为文件上传控制选择最少三个文件，当我选择少于三个文件时，我想在客户端本身发出警报消息。我应该在哪里更改现有代码？ 我哪里做错了请指导我：

我在 aspx 中的代码：

<label>Root Cause Image<span style="color: #ff0000;">*</span></label>
<asp:FileUpload ID="FileUpload_RootCause" runat="server" 
    accept=".png,.jpg,.jpeg,.gif" 
    multiple="multiple" 
    type="file" 
    name="image[]" />
<asp:RegularExpressionValidator ID="rev1" runat="server"
    ControlToValidate="FileUpload_RootCause" 
    required="This Field is Required" 
    ErrorMessage="Only JPG and PNG are allowed" 
    ValidationExpression=".*((\.jpg)|(\.JPG)|(\.png)|(\.PNG))" 
    CssClass="red">
</asp:RegularExpressionValidator>

<script>
    $("#FileUpload_RootCause").on("change", function () 
    
        if ($("#FileUpload_RootCause")[0].files.length < 3) 
        
            alert("You have to select minimum 3 images to proceed Further");
        
        else
        
            $("#imageUploadForm").submit();
        
    );
</script>

上面的代码根本不工作不知道为什么？，我尝试了第二种方法，我尝试了类似的方法

我得到了和以前一样的东西，它没有发出任何警报消息，为什么？以及我做错了什么

 <asp:FileUpload ID="FileUpload_RootCause"  runat="server" 
        accept=".png,.jpg,.jpeg,.gif" AllowMultiple="true"  />
<script>
        function ValidateFile2() 
        var fileCount = 
        document.getElementByID('FileUpload_RootCause').files.length;
        if (fileCount < 3)
        
        alert("Please select minimum 3 images..!!!");
        return false;
        
        else if (fileCount <= 0) 
        
        alert("Please select at-list 1 image..!!!");
        return false;
        

        return true;
        
</script>

【问题讨论】：

您在 RegularExpressionValidator 上有一个“必需”属性。我不认为这是有效的。与 asp:FileUpload 控件上的所有属性相同。也许尝试上传 html？

但我只是尝试了你所拥有的，它在 Firefox 和 Chrome 中对我有用。

我也在使用 Chrome，但在我的情况下它不起作用？？

这里没有关于 jQuery Validate 插件的内容。编辑标签。

@sparky 我应该添加什么？？

【参考方案1】：

请检查下面的代码，它正在工作，只需检查它。

<%@ Page Title="About" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="WebApplication3.About" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

    <label>Root Cause Image<span style="color: #ff0000;">*</span></label>
    <asp:FileUpload ID="FileUpload_RootCause" runat="server"
        accept=".png,.jpg,.jpeg,.gif"
        multiple="multiple"
        type="file"
        name="image[]" />
    <asp:RegularExpressionValidator ID="rev1" runat="server"
        ControlToValidate="FileUpload_RootCause"
        required="This Field is Required"
        ErrorMessage="Only JPG and PNG are allowed"
        ValidationExpression=".*((\.jpg)|(\.JPG)|(\.png)|(\.PNG))"
        CssClass="red">
    </asp:RegularExpressionValidator>


    <script>

        $(document).ready(function () 

            $("#MainContent_FileUpload_RootCause").on("change", function () 
                if ($(this)[0].files.length < 3) 
                    alert("You have to select minimum 3 images to proceed Further");
                
                else 
                    $("#imageUploadForm").submit();
                
            );
        );

    </script>

</asp:Content>

【讨论】：

我应该添加检查

@dear vishal 我不太了解 java 脚本如何检查 jquery 是否加载。你能解释一下吗？？

检查控制台是否出现任何错误。其显示错误 Uncaught TypeError: Cannot read property '_buttons' of undefined at m._constructor (dataTables.buttons.min.js:10) at new m (dataTables.buttons.min.js:6) at (index):455

@NitsPatel，由于 jquery 问题，您的代码无法正常工作。使用前需要加载所有需要的js文件

当您的控件放置在内容占位符中时，它会自动添加前缀和内容占位符ID，您可以先检查您的控件生成的ID并使用它。

【参考方案2】：

我试过这样的事情

     <asp:FileUpload ID="FileUpload_RootCause" runat="server"  accept=".png,.jpg,.jpeg,.gif" required="This Field is Required" AllowMultiple="true"  onchange="Validate()"/>
     <asp:RegularExpressionValidator ID="rev1" runat="server" ControlToValidate="FileUpload_RootCause" ErrorMessage="Only JPG and PNG are allowed" ValidationExpression=".*((\.jpg)|(\.JPG)|(\.png)|(\.PNG))" CssClass="red"></asp:RegularExpressionValidator>
    <script >
     function Validate() 
          debugger;
          var fileCount = document.getElementById("ContentPlaceHolder1_FileUpload_RootCause").files.length;
          if (fileCount <3 )
             alert("You have to Select Minimum 3 images to Proceed Further");
             document.getElementById("ContentPlaceHolder1_FileUpload_RootCause").value = null;
   

 </script>