提交按钮上的鼠标按下事件会干扰默认的单击行为

Question

>我有一个部分视图，其中包含文件输入和提交按钮。当我尝试在单击提交按钮时禁用文件输入时，HttpPostedFiles 在控制器中变为空，我是 Jquery 的新手，所以我想这可能会干扰提交按钮的默认行为。当我在单击事件时取消绑定时，整个事情都会撤消，文件输入再次启用。因此，我试图在鼠标按下提交按钮时禁用我的文件输入，同样的问题再次出现。当我删除此代码时，我得到了发布的文件。

我的观点包含：

@{ Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, 
new { id  "fileUploader",enctype  "multipart/form-data" });}
<div>
<table>
<tr><td><label for="file1">Filename:</label>           
<input type="file" name="files" id="file1" /></td></tr>
<tr><td><label for="file2">Filename:</label>         
<input type="file" name="files" id="file2" /></td></tr>     
<tr><td>  <input type="submit" id="btnUpload" name="Command" Value="Upload"/> </td></tr> </table>
</div>
@{ Html.EndForm();}

我的脚本文件包含：

$(document).ready(function () {
 $('#btnUpload').click(function (e) {
        $('#file1').attr('disabled', true);
        $('#file2').attr('disabled', true);

    });
});

有什么想法如何在不搞砸提交按钮行为的情况下禁用我的文件输入（输入类型 ="文件"）？

提前谢谢。

Answer 1

我通过在单击提交按钮时禁用文件输入的单击事件来解决此问题，而不是禁用整个控件，我还使其半透明，以便用户感觉它被禁用。

$('#file1').on("click", false);
    $('#file2').on("click", false);
    $('#file1').css("opacity", "0.5");
    $('#file2').css("opacity", "0.5");

禁用整个控件会使发布的文件为空。