如何禁用提交按鈕，直到文件被選中

我有一個HTML文件上傳頁面，我需要提交按鈕被禁用，直到選擇一個文件。然後提交按鈕將被啓用，用戶可以上傳。我假設我可以使用jQuery代碼來查詢文件上傳字段的值，以查看是否選擇了文件上傳。我假設每當焦點離開文件上傳字段時我都可以檢查。我擔心的是，某些瀏覽器可能會對此產生有趣的影響，然後我的用戶無法上傳任何文件。如何禁用提交按鈕，直到文件被選中

有沒有一種安全的方式來做到這一點，最好使用jQuery，我不會有一些用戶無法上傳的危險？

來源

2010-12-12 at.

這jQuery應該工作，並且綁定到文件輸入的change()事件。此代碼還適用的disabled屬性，這樣，在該事件中的用戶禁用了JavaScript，它不應該阻止形式使用：

$(document).ready(
    function(){ 
     $('input:submit').attr('disabled',true); 
     $('input:file').change(
      function(){ 
       if ($(this).val()){ 
        $('input:submit').removeAttr('disabled'); 
       } 
       else { 
        $('input:submit').attr('disabled',true); 
       } 
      }); 
    });

JS Fiddle demo。

來源

2010-12-12 10:21:17

這看起來應該起作用。儘管我仍然對瀏覽器問題感到有些害怕，導致一些用戶無法上傳，但我猜測我只需要進行徹底的測試。它被禁用JavaScript我擔心，這是我擔心的JavaScript怪癖。 – 2010-12-12 19:08:10

更簡單的方法是在用戶實際提交表單時檢查文件字段......這樣您就不必查找表單更改。

$(function() { 
    $('form').submit(function() { 
     if(!$("form input[type=file]").val()) { 
     alert('You must select a file!'); 
     return false; 
     } 
    }); 
});

此代碼是Unobtrusive JavaScript，它不會弄亂的形式，如果用戶不支持JS。

來源

2010-12-12 09:50:00 Mickel

這可能是在維基百科頁面意義上的「不顯眼」，但在用戶的面部潑阻塞警報彈出很突兀。 – adamse 2010-12-12 10:36:27

而且，在我看來，允許用戶在滿足提交條件之前嘗試提交表單，這至少令人沮喪。 – 2010-12-12 12:04:57

大衛·托馬斯的代碼可以爲按鈕ID設置：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%=btInsert.ClientID %>').attr('disabled', true); 
     $('input:file').change(
      function() { 
       if ($(this).val()) { 
        $('#<%=btInsert.ClientID %>').removeAttr('disabled'); 
       } 
       else { 
        $('#<%=btInsert.ClientID %>').attr('disabled', true); 
       } 
      }); 
    }); 
</script>

來源

2014-09-13 01:27:55

如何禁用提交按鈕，直到文件被選中

回答

相關問題