JavaScript ファイルが選択されていない場合+ファイルアップロード中は送信ボタンをグレーアウトにする。

参考サイト
今回したいことは

送信画面にて
・フォーム画面にて「ファイルが選択されていない」場合フォームの「送信ボタン」をグレーアウトでクリック不可能

という処理を実装したいのですが
ファイルが選択されているか判断をJavaScriptにて実装することは可能のでしょうか？
可能な場合どのように判断するのでしょうか？

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

回答2件

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<input type="file" id="file1">
9<input type="submit" id="submit1">
10<script>
11    document.addEventListener("DOMContentLoaded", function () {
12        document.getElementById("submit1").disabled = true;
13    }, false);
14
15    document.getElementById("file1").addEventListener("change", function () {
16        if (document.getElementById("file1").files.length > 0) {
17            document.getElementById("submit1").disabled = false;
18        }
19    }, false);
20</script>
21</body>
22</html>

投稿2017/07/31 07:10

s8_chu

総合スコア14731

amaguri

2017/07/31 07:24

調べながら読んでみましたがこれは最初のHTMLドキュメントの読み込みと解析が完了した時にdisabled（使用禁止をONにして)、「file1」がファイル選択でトリガーした時getElementByIdでファイルの値を取得してファイルのlengthプロパティが0以上ならボタンが有効かというコードなのですね！例えばなのですがファイルロード中に「送信ボタン」の動きを禁止する場合はこのコードのような書き方をしているとどのような書き方をされるのでしょうか？

s8_chu

2017/07/31 07:27

ファイルロード中に「送信ボタン」の動きを禁止する、とはどのような動作なのかもう少し詳しく教えていただけませんか？

amaguri

2017/07/31 07:39 編集

返信ありがとうございます！ ajaxを利用して画像の選択した後、画像を読み込んでいる状態の時などにも送信ボタンの制御ができたらなと

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

ベストアンサー

ファイルが選択されていない場合およびsubmit押されたときの制御なら

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8" />
5<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
6<script type="text/javascript">
7$(function() {
8    $('#submit').attr('disabled', 'disabled');
9    $('#inputFile').on("change", function() {
10        var file = this.files[0];
11        if(file != null) {
12            $('#submit').removeAttr('disabled');
13        }
14        else {
15            $('#submit').attr('disabled', 'disabled');
16        }
17    });
18    $('#submit').submit(function() {
19        $('#submit').attr('disabled', 'disabled');
20        return true;
21    });
22});
23</script>
24</head>
25<body>
26<input type="file" id="inputFile">
27<input type="submit" id="submit" value="Submit" />
28</body>
29</html>

こんな感じかな。アップロード中に関してもその処理の前後に

$('#submit').attr('disabled', 'disabled');

および

$('#submit').removeAttr('disabled');

を入れればいいかと

propのほうがいいようなので追加

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8" />
5<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
6<script type="text/javascript">
7$(function() {
8    $('#submit').prop('disabled', true);
9    $('#inputFile').on("change", function() {
10        var file = this.files[0];
11        if(file != null) {
12            $('#submit').prop('disabled', false);
13        }
14        else {
15            $('#submit').prop('disabled', true);
16        }
17    });
18    $('#submit').submit(function() {
19        $('#submit').prop('disabled', true);
20        return true;
21    });
22});
23</script>
24</head>
25<body>
26<form>
27<input type="file" id="inputFile">
28<input type="submit" id="submit" value="Submit" />
29</form>
30</body>
31</html>