ファイルをアップロードするformでファイルが追加されるまでsubmitボタンを利用できなくする方法

formを使ってファイルをアップロードする際に、ファイルが追加されるまでsubmitボタンを利用できなくする方法をご紹介します。

htmlは以下のようにします。

<form action="" method="post">
    <input type="file"  />
    <button type="submit" name="submit_button" value="submit" disabled> 送信 </button>
</form>

</form>

buttonをdisabledにしています。

jQuery では以下のように「’input:file’」を使用します。

function(){
    $('input:file').change(
        function(){
            if ($(this).val()) {
                $('button:submit').attr('disabled',false);
            } 
        }
        );
});

function(){

$('input:file').change(

function(){

if ($(this).val()) {

$('button:submit').attr('disabled',false);

}

);

});

「 $(‘button:submit’).attr(‘disabled’,false);」で、元々disableにしていたボタンをfalseにします。これで、有効になるわけですね！