input type="file" の選択判定を行いたい

Question

前提・実現したいこと

input type="file"でファイルのアップロードの画像を選択しているかをif文を使い判定を行いたいのですが、うまく行きません。

該当のソースコード

<input type="file" class = "bg-white" id="myImage"
 accept="image/*"  onchange="setImage(this);" 
onclick="this.value = '';" >
 @if("preview" === null)
   <img src="image/foge.jpg">
 @endif
 <img id="preview" >
  <script>
    function setImage(target) {
     var reader = new FileReader();
     reader.onload = function (e) {
       document.getElementById("preview").setAttribute('src', e.target.result);
       }
     reader.readAsDataURL(target.files[0]);
    };    
</script>

試したこと

nullやundefinedで条件分岐を行いましたが、うまく行きません。
宜しくお願いします。

Comments

[int32_t]

質問文のコードには 'if' はないですね?
if で何を判定して、その結果なにをしたいのでしょうか?

[ikedayuuki]

ファイルを選択していなければデフォルトの画像を予備でしたいです。

jsにも
'''
if(target === null){
document.write(’<img src="image/foge.jpg">’);
}
'''
など試しましたがうまく行きません

[m.ts10806]

"preview"
となぜ文字列？
これは何のテンプレートエンジンでしょうか。

Answer 1

ここでは、Javascriptで、target.files.lengthとすると、選択されているファイルの個数を取得できます。
この個数が0のときというのが、今記述されたい条件なのではないでしょうか？

闇雲に色々やってみるのではなく、ファイルが選択されていないときに「どの変数に」「どのような値が」入っているか観察することをお勧めします。

（ご質問のコードで、選択したファイルが"target.files"に入っていることは理解されているかと思うので、

• そのfiles変数はFileList型である
• そのFileList型にはlengthというプロパティがあり、ファイルの個数が入っている

ということを、ドキュメントを読めば把握できるかと思います。）

（参考：MDN - FileList）

【追記】HTMLの"@if"、"@endif"はなくした方がよいでしょう。（この方法で出来たとしても、一回ファイルを選択してから選択を解除したときなどは、表示したい画像が表示されません）
setImage関数の中で、

• target.files.lengthが0のときは画像を表示する（CSSのdisplay:blockなど）
• target.files.lengthが0より大きいときは画像を非表示にする（CSSのdisplay:noneなど）

のがよいのではないでしょうか？？

Comments

[ikedayuuki]

ありがとうございます。
target.files.lengthで無事解決ができました！