web-dev-qa-db-ja.com

アップロードするファイルが選択されるまで送信ボタンを無効にする

画像をアップロードするためのフォームがあります。ユーザーがアップロードする画像を選択するまで、送信ボタンを無効にしたいのですが。 jQueryでやりたいのですが。現在、JavaScript関数があり、ユーザーが送信時にフォームを無効にすることで、フォームを複数回送信できないようにしています。この機能を新しい機能と組み合わせるとよいでしょう。

ここに私が今持っているものがあります：

<script type="text/javascript">
function submitonce(theform) {
    //if IE 4+ or NS 6+
    if (document.all || document.getElementById) {
        //screen thru every element in the form, and hunt down "submit" and "reset"
        for (i = 0; i < theform.length; i++) {
            var tempobj = theform.elements[i]
            if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
            //disable em
            tempobj.disabled = true
        }
    }
}
</script>
<form name="form" enctype="multipart/form-data" method="post" action="upload.php" onSubmit="submitonce(this)">
 <input type="file" name="my_field" value="" />
 <input type="submit">
</form>
jqueryfile-uploadwebforms
26
santa

以下は、ChromeおよびFirefox（Ubuntu 10.10）で確実に機能するようです。現在、他のプラットフォームでは確認できません。

jQuery

$(document).ready(
    function(){
        $('input:file').change(
            function(){
                if ($(this).val()) {
                    $('input:submit').attr('disabled',false);
                    // or, as has been pointed out elsewhere:
                    // $('input:submit').removeAttr('disabled'); 
                } 
            }
            );
    });

html

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

JS Fiddleのデモ 。

45
David Thomas

Prop（）を使用する少し簡単な方法は、今それを行うための好ましい方法だと思います：

$('input:file').on("change", function() {
    $('input:submit').prop('disabled', !$(this).val()); 
});

IEでテスト済み、ChromeおよびFireFox。

17
matt burns

試す

   $('#my_uploader').change(function() {
      if($(this).val()) {
        $('#my_submit_button').attr('disabled', '');
      } else {
        $('#my_submit_button').attr('disabled', 'disabled');
      }
    });
4
Aaron Hathaway

3項式のファンの場合：

$(document).ready(function(){
    var $submit = $('#submit_document');
    var $file = $('#file_path');

    $file.change(
        function(){
            $submit.attr('disabled',($(this).val() ? false : true));
        }
    );
});
1
JayJay

送信を無効にする代わりに、ユーザーが最初にファイルを選択せず​​にそれを押した場合に指示を提供する方が役立つ可能性がありますか？送信のonclickコードとしてこのようなものを追加しますか？

var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;

ファイルコントロールには、名前とIDが必要になることに注意してください。

0
DJDave