多个文件上传导致每个禁用的按钮变为启用

Question

在一个页面上，我有多个文件上传，每个文件都有自己的上传按钮。

当我调用 type="submit" 按钮时，每个文件加载都会转到自己的控制器并加载其文件。这很好用，相同的代码可以用于所有文件上传

$("form").submit(function (eventObj)

我正在努力解决的是：我不希望用户在没有选择文件的情况下能够按下上传按钮，所以我已经禁用按钮，直到按下文件为止，禁用位起作用美好的。我需要帮助的是，当选择文件时，我如何调用将禁用按钮更改为启用（当用户选择文件时）的方法，并使用可用于所有文件上传的相同代码位来进行多个文件上传。 有没有办法让启用按钮的工作方式有点像这一行：

$("form").submit(function (eventObj) {

处理所有文件上传？ 我想尝试避免为每个文件上传使用不同的代码，并为每个文件上传保持 id="filename" 等名称相同。我可以让它用于单个文件上传，但不能用于多个文件上传。

希望我的问题有意义，我对 Javascript 很陌生。

提前谢谢您。

<h1>Upload Files</h1>

<form enctype="multipart/form-data" asp-action="UploadFile" asp-controller="Ls" method="post">
    <dl>
        <dd>
            <input type="file" name="file" id="filename">             
            
        </dd>
    </dl>
    <input class="btn btn-primary" id="uploadButton" type="submit" value="Upload" disabled/>
</form>


<form enctype="multipart/form-data" asp-action="UploadFile" asp-controller="Cv" method="post">
    <dl>
        <dd>
            <input name="file" type="file" id="filename">            
        </dd>
    </dl>
    <input class="btn btn-primary" id="uploadButton" type="submit" value="Upload" disabled/>
</form>
   //there are more of these upload forms



@section Scripts {
    <script>    
        filename.onchange = function(eventObj)  {
                //this works but only for the first file upload not the other ones.
                if($(this).val())
                {
                    $("#uploadButton").prop("disabled", false);
                }
                else
                {
                    $("#uploadButton").prop("disabled", true);
                }
        };

        $("form").submit(function (eventObj) {                        
           //some stuff
            var formData = new FormData(eventObj.currentTarget);                  
            
            $.ajax({
                url : eventObj.currentTarget.action,
                type: "POST",
                data : formData,
                processData: false,
                contentType: false,
                cache: false,
                enctype: 'multipart/form-data',   
               
                success:function(data, textStatus, jqXHR){                    
                    console.log("in success");                   
                },
                error: function(jqXHR, textStatus, errorThrown){                      
                }
            });            
            return false;            
        }); 
    </script>
}

Answer 1

处理

onchange

事件时，您需要从受影响的文件输入元素导航到相关按钮。

例如：

$(this).closest("form").children(".uploadButton").prop("disabled", false);

另请注意，元素的

id

属性在 HTML 文档中需要是唯一的，因此为了使其适用于多种表单，您需要使用按钮的 class 属性。