2010-12-12 8 views
2

私はHTMLファイルのアップロードページを持っています。ファイルが選択されるまで、送信ボタンを無効にする必要があります。その後、送信ボタンが有効になり、ユーザーはアップロードできます。私は、アップロードするファイルが選択されているかどうかを確認するために、ファイルのアップロードフィールドの値を問い合わせるためにjQueryコードを使用できると仮定します。そして、フォーカスがファイルアップロードフィールドを離れたときにいつでも確認できると思います。私の懸念は、いくつかのブラウザがこれで面白いかもしれないし、ユーザーがファイルをアップロードできないということです。ファイルが選択されるまで送信ボタンを無効にする方法

これを実行する安全な方法はありますか?jQueryを使用してください。アップロードできないユーザーがいらっしゃる危険はありません。

答えて

5

このjQueryは機能し、ファイル入力のchange()イベントに関連付けられています。

$(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:このコードはまた、そうdisabled属性が適用され、ユーザーはJavaScriptが無効になっている場合には、それが使用されているフォームを妨げるべきではありません。

+0

これはうまくいくようです。私はまだいくつかのユーザーがアップロードすることができないブラウザの問題を少し怖いですが、私は徹底的なテストを行う必要があります。私が心配していたのはJavaScriptが無効になっていたため、私が心配していたのはJavaScriptの癖でした。 –

5

もっと簡単な方法は、ユーザーがフォームを実際に送信するときにファイルフィールドをチェックすることです。フォームの変更を探す必要はありません。

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

このコードはUnobtrusive JavaScriptあり、それはめちゃくちゃにフォームをユーザーがJSをサポートしていない場合ではないでしょう。

+0

これは、ウィキペディアのページの意味での「控えめ」ことが、ユーザーの顔に阻止警告ポップアップを投げることは非常に目障りであるかもしれません。 – adamse

+1

そして、私の考えでは、送信条件が満たされる前にユーザーがフォームを試して提出できるようにするのは、せいぜい苛立っています。 –

0

デビッド・トーマスのコードは、ボタンの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> 
関連する問題