Javascript 在加载文件时防止单击表单按钮

我正在使用下面的代码片段，它允许一个人用一个上传按钮上传最多3个文件。上载文件时，动画将代替上载按钮运行

我的要求是，我需要防止用户在上传文件时单击任何输入字段按钮。我不想为此使用hide（）函数。在jQuery中是否有一种方法可以阻止在上传文件/加载动画运行时单击输入字段按钮。 最近开始使用jQuery，所以还是初学者，因此希望使用一个简单的解决方案。谢谢

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on("click", ".UploadBtn", function(event) {
            $(".p").each(function(file) {
                if  ($(this).val()) {
                    $(".loader").show();
                    $(".spinner").show();
                    $(".UploadBtn").hide();
                }
            })
        });
    });
</script>

当红色按钮指向的上载按钮 单击文件时，动画开始在其所在位置运行 上传。在此期间，我想阻止任何人点击 在choose文件（）上，蓝色箭头指向它

---

尝试使用道具禁用上传按钮

$(document).ready(function() {
 $(document).on("click", ".UploadBtn", function(event) {
  $(".p").each(function(file) {
    if  ($(this).val()) {
      $(".loader").show();
      $(".spinner").show();
      $(".UploadBtn").prop("disabled", "true");
    }
  })
 });
});

---

尝试使用道具禁用上传按钮

$(document).ready(function() {
 $(document).on("click", ".UploadBtn", function(event) {
  $(".p").each(function(file) {
    if  ($(this).val()) {
      $(".loader").show();
      $(".spinner").show();
      $(".UploadBtn").prop("disabled", "true");
    }
  })
 });
});

---

在jQuery 1.6+中，您可以将属性

attr='disabled'

或

attr='readonly'

动态添加到输入字段，直到您确认文件已加载：

// put this within the code that checks if the files are still loading
$(".UploadBtn").prop('disabled', true);

// within the code that checks if the files have successfully loaded, make sure to use the following
$(".UploadBtn").prop('disabled', false);

---

还可以快速查看此详细答案的作用。

在jQuery 1.6+中，您可以将属性

attr='disabled'

或

attr='readonly'

动态添加到您的输入字段，直到您确认文件已加载：

// put this within the code that checks if the files are still loading
$(".UploadBtn").prop('disabled', true);

// within the code that checks if the files have successfully loaded, make sure to use the following
$(".UploadBtn").prop('disabled', false);

---

另外，请快速查看此详细答案中的作用。

添加属性禁用功能不也会阻止文件上载吗？在上载过程开始后或单击上载按钮后动态添加属性添加属性禁用功能不也会阻止文件上载吗？在上载过程开始后或之后动态添加属性单击上载按钮我试图阻止单击“选择文件”按钮，而不是上载按钮，因为加载动画在其位置运行，上载按钮消失。我只想阻止选择文件按钮，它是{{form.photo1}、{{form.photo2}&{form.photo3}的一部分。此外，一旦文件被上传，页面就会刷新。我试图阻止单击“选择文件”按钮，而不是“上载”按钮，因为加载动画会在其位置运行，上载按钮会消失。我只想阻止选择文件按钮，它是{{form.photo1}、{{form.photo2}&{form.photo3}的一部分。此外，一旦文件被上传，页面就会刷新。我试图阻止单击“选择文件”按钮，而不是“上载”按钮，因为加载动画会在其位置运行，上载按钮会消失。我只想阻止选择文件按钮，它是{{form.photo1}、{{form.photo2}&{form.photo3}的一部分。此外，一旦文件上传，页面就会刷新。嘿，我似乎在你发布的代码中找不到选择按钮的代码？刷新页面：你可以有一个回调，根据文件上传的结果，您可以切换

disabled

的值并刷新页面。页面正在通过Django/Python刷新，因此我不担心这一点，只想向您提供页面刷新信息。选择按钮已由添加，Django用于其逻辑。我已经给那些输入表格上了“p”课。此外，我希望在加载动画运行时，即文件正在上载时，防止单击“选择文件”按钮（）。我试图防止单击“选择文件”按钮而不是上载按钮，因为加载动画在其位置运行，上载按钮消失。我只想阻止选择文件按钮，它是{{form.photo1}、{{form.photo2}&{form.photo3}的一部分。此外，一旦文件上传，页面就会刷新。嘿，我似乎在你发布的代码中找不到选择按钮的代码？刷新页面：你可以有一个回调，根据文件上传的结果，您可以切换

disabled

的值并刷新页面。页面正在通过Django/Python刷新，因此我不担心这一点，只想向您提供页面刷新信息。选择按钮已由添加，Django用于其逻辑。我已经给那些输入表格上了“p”课。此外，我还想防止在加载动画（即文件上载）运行时单击“选择文件”按钮（）。