jQueryでimgタグのsrcを取得できない

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
初心者です。
keras + flask で画像をwebにアップロードする機能を実装していました。
その際、jqueryでimgタグのsrcの値を取得したかったのですが、取得できておらず、原因が分からなかったたため投稿しました。

下記コードで取得しようとしたのですが、取得できていないようです。

jQuery
1var src = $('#img1').attr('src');

srcの値を取得できない原因と、その対策を教えていただければと思います。

該当のソースコード

HTML
1<!DOCTYPE! html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>サンプル</title>
6        <script type=text/javascript src="/static/js/jquery-3.3.1.min.js"></script>
7        <script type = text/javascript src="/static/js/text.js"></script>
8        <link rel="stylesheet" type="text/css" href="/static/css/style.css">
9        
10    
11    </head>
12    <body>
13        <div id = "title">
14            <h1>タイトル</h1>
15        </div>
16        <form method=post enctype=multipart/form-data>
17            
18            <img id = 'img1' style="width:300px;height:300px;">
19            <br>
20            <input type='file' id='myfile' name="file">
21            <input type="submit" id = 'submit' value="Upload">
22        
23        </form>
24        <p class="lead">
25          {% if result %}
26            判定結果は、{{ result }}
27          {% else %}
28          {% endif %}
29        </p>
30    </body>
31</html>

jQuery
1$(function(){
2    $('#myfile').change(function(e){
3        //ファイルオブジェクトを取得する
4        var file = e.target.files[0];
5        var reader = new FileReader();
6        
7        //画像でない場合は処理終了
8        if(file.type.indexOf("image") <0){
9           alert("画像ファイルを指定してください");
10           return false;
11        };
12        
13        reader.onload = (function(file){
14            return function(e){
15                $("#img1").attr("src", e.target.result);
16                $("#img1").attr("title", file.name);
17            }
18        })(file);
19        reader.readAsDataURL(file);
20        
21        var src = $('#img1').attr('src');
22        console.log('src');
23        
24
25    });
26    
27    
28//  もしid = #img1にsrcがないときsubmitしたときはalertを返す機能
29//    var src = $('#img1').attr('src');
30//    $('#submit').click(function(){
31//            alert(src);
32//            return false;
33//        
34//    });
35    
36});
37

補足情報

最終的にformに画像がアップロードされていなければ、alertで「画像が入っていない」と返して、return falseでイベントを終了する機能を作りたいと思っていました。

###追記3/15
読み込み後の結果は、onloadイベントで得られるようなので、下記のように書き換えたところ、srcの値を得ることができました。

javascript
1$(function(){
2    $('#myfile').change(function(e){
3        //ファイルオブジェクトを取得する
4        var file = e.target.files[0];
5        var reader = new FileReader();
6        
7        //画像でない場合は処理終了
8        if(file.type.indexOf("image") <0){
9           alert("画像ファイルを指定してください");
10           return false;
11        };
12        
13        reader.onload = (function(file){
14            return function(e){
15                $("#img1").attr("src", e.target.result);
16                $("#img1").attr("title", file.name);
17                
18                var src = $("#img1").attr("src");
19                console.log(src);
20            }
21        })(file);
22        reader.readAsDataURL(file);
23        
24        
25
26    });
27    
28});

が最終的に私が行いたいsrcに値が入っていない場合、alertしてイベントを終了しようとするコード(下記)を書いてみたものの、alertは実行されませんでした。

javascript
1$(function(){
2    $('#myfile').change(function(e){
3        //ファイルオブジェクトを取得する
4        var file = e.target.files[0];
5        var reader = new FileReader();
6        
7        //画像でない場合は処理終了
8        if(file.type.indexOf("image") <0){
9           alert("画像ファイルを指定してください");
10           return false;
11        };
12        
13        reader.onload = (function(file){
14            return function(e){
15                $("#img1").attr("src", e.target.result);
16                $("#img1").attr("title", file.name);
17                
18                var src = $("#img1").attr("src");
19                $('#submit').click(function(){
20                    if(src === ""){
21                        alert("画像をアップロードしてください");
22                        return false;
23                    }
24       
25                });
26            }
27        })(file);
28        reader.readAsDataURL(file);
29        
30        
31
32    });
33    
34});

これは何が問題なのでしょうか？

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

回答2件

reader.onloadが実行されるまでsrcが無いからです。何かのロードを待つなど非同期処理の場合は順番を考えないといけません。

js
1        reader.onload = (function(file){
2            return function(e){
3                $("#img1").attr("src", e.target.result);
4                $("#img1").attr("title", file.name);
5            }
6        })(file);
7        reader.readAsDataURL(file);
8
9        // この時点でonloadされていない
10        var src = $('#img1').attr('src');
11        console.log('src');

もしid = #img1にsrcがないときsubmitしたときはalertを返す機能

変数を用意してreader.onloadに渡す関数が呼び出された際にフラグを代入するとか、下記のように送信時に値を確認するとかでしょうか。

js
1$( 'form' ).on( 'submit', function(){
2    if ( $("#img1").attr("src") == '' ) return false;
3});

投稿2019/03/15 03:13

編集2019/03/15 03:26

kei344

総合スコア69398

salmon_0511

2019/03/15 04:18

回答ありがとうございます。 reader.onloadされた後であればsrcの値を取れるということですね。ただ、reader.onloadがよく分かっていないため、調べつつ、適切な順番を考えていこうと思います。最終的にはkei344さんがおっしゃるように ``` $( 'form' ).on( 'submit', function(){ if ( $("#img1").attr("src") == '' ) return false; }); ``` という挙動にしたいと思っています。

kei344

2019/03/15 06:54

質問文への追記については、画像を一度も呼び出していない場合や画像の読み込みに失敗している場合、クリックイベントすら登録されませんので、そこに書くのが間違っています。あと、送信するならsubmitイベントを検知しなければ、クリック以外の操作で送信が行われてしまうことになります。

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

こんな感じで
（検証用にサーバー側でphpがファイルを受け取る前提にしてあります）

javascript
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  var src=null;
8  $('#myfile').on('change',function(e){
9    var t=e.target;
10    var file = t.files[0];
11    var type=file.type;
12    if(type.indexOf("image") <0){
13      $('#error').text("画像ファイルを指定してください");
14      t.value="";
15      $("#img1").prop("src", "");
16      e.preventDefault();
17    }else{
18      $('#error').text("");
19      var blob=new Blob([file],{type:type});
20      var url = window.URL || window.webkitURL;
21      $("#img1").prop("src", url.createObjectURL(blob));
22      $("#img1").prop("title", file.name);
23    }
24  });
25  $('#f1').on('submit',function(e){
26    if($('#myfile').val()===""){
27      $('#error').text("ファイルを選択してください");
28      e.preventDefault();
29    }
30  });
31});
32</script>
33<div id = "title">
34<h1>タイトル</h1>
35</div>
36<form id="f1" method="post" enctype="multipart/form-data">
37<img id = 'img1' style="width:300px;height:300px;">
38<span id="error"></span><br>
39<input type='file' id='myfile' name="file">
40<input type="submit" id = 'submit' value="Upload">
41</form>
42<p class="lead"></p>
43
44