Ajax：UPLOAD送信前のボタンの制御ついて

前提・実現したいこと

Ajax+PHP+nginx環境で、ファイルアップロード（ドラッグ＆ドロップ）の
開発を行っているAjaz初心者です。
ファイルアップロード（ドラッグ＆ドロップ）時のファイル指定前では、
[アップロード]ボタンを非活性化し、ドラッグ＆ドロップしたファイルの
存在を確認できたら、[アップロード]ボタンを活性化させて制御したい
内容です。
詳細では、フォームで更に幾つかの入力項目を増やす設計です。
可能であれば、その入力項目がすべて埋まれば、[アップロード]ボタンを
出現出来ればと考えています。

発生している問題・エラーメッセージ

Javascript部分、Ajax部分でアップロード指定したファイルの存在等で
どうにか変数を取得できないか、模索中ですがNGです。
以下のAjax部分でのボタン制御では、何も動作しません。

該当のソースコード

■Javascript、Ajax部分
●--------以下のコード追加　2019/02/1518:15
<script type="text/javascript">
var waitList=[];  
function addWaitList(files){  
    for(var i=0;i<files.length;i++){  
        var sameName=-1;  
        for(var j=0;j<waitList.length;j++){  
            if(files.item(i).name==waitList[j].name){  
                sameName=j;  
                break;  
            }  
        }  
        if(sameName<0) {
            waitList.push(files.item(i));  
            $("#waitingList").append('<li class="waitFileList">'+files.item(i).name+'</li>');
//alert(waitList.length);
        }else{  
            waitList[sameName]=files.item(i);  
        }  
    }  
} 
●--------ここまで
    // ファイルをアップロード
    $('#upload').on('click',function(){
        var fd= new FormData();
        for(var i=0;i<waitList.length;i++) {
            $("[id^='HiddenFile']").each(function(){
                if($(this).val()==waitList[i].name){
                    overwriteFiles.push($(this).val());
                    return false;
                }
            });
           fd.append('file['+i+']', waitList[i]);
        }
        // アップロード=>情報登録する前の最終確認
        if (!confirm('アップロード=>情報登録しますか？')) {
            // 処理を中断
            return false;
        }
        $.ajax({
            url: 'send_upload.php',
            type: 'POST',
            contentType: false,
            processData: false,
            cache: false,
            data: fd,

            beforeSend: function(xhr, settings) {
                //送信前の処理：ボタンを非活性化して、二重送信を防ぐ
                $('#ubutton').attr('disabled', true);
            },
            complete: function(xhr, textStatus) {
                //ajax通信が完了したら、ボタンの非活性化を解除する
               $('#button').attr('disabled', false);
            },

            success: function(data) {
               alert('アップロードに成功しました');
                $('.waitFileList').remove();  
                waitList=[];  
            },
            error: function(data) {
               alert('アップロードに失敗しました');
            }

--------------------------------------------------------------
■フォーム部分
      &ensp;&ensp;&ensp;<input type="button" id="clearWaitList" value="クリア">
          &ensp;&ensp;&ensp;<input type="button" id="upload" value="アップロード=>情報登録">

kei344

2019/02/15 07:17

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2019/02/15 08:08

提示されているJavaScriptは何かの途中を切り出したもので、参照している変数がどういうものかがわかりません。問題を再現できるコードを提示されたほうが、解決につながると思います。

x_x

2019/02/15 09:24

beforeSend はボタンを押した後の話なのでそこでボタン制御しても仕方ないですよね？普通のフォーム制御ではないのでしょうか？

yambejp

2019/02/15 10:00

ドラッグアンドドロップしたら即アップロードが普通だと思いますがそこから更にアップロードボタンをおしてアップするのですか？

hanamichi

2019/02/15 10:34

x_xさん）　beforeSendは勘違いでした。　yambejpさん）　実は本来ドラッグアンドドロップする前に、アップロードボタンを押下すると、ファイルが無いのに成功となるため、どうにか無効との制御をしたかったんですが出来なくて、代わりにと考えて質問サセテ貰いました。簡単にファイル無しでもボタン押下しても何も動作しないように出来ればとありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

イマイチすりあわせができないようなので勝手に書きます。
（サーバー側はとりあえずphpで受ける設定）

javasacript
1<?PHP
2print_r($_FILES);
3?>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5<script>
6$(function(){
7  $('[name="f[]"]').on('change',function(){
8    $('#go').prop('disabled',$(this).val()=="");
9  }).trigger('change').closest('form').on('reset',function(){
10    $(this).find('[name="f[]"]').val("").trigger('change');
11  });;
12  
13});
14</script>
15<form method="post" enctype="multipart/form-data">
16<input type="file" name="f[]" multiple><br>
17<input type="submit" value="go" id="go">
18<input type="reset" value="reset">
19</form>
20