質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.40%
Null

Nullとは、プログラミング言語やデータベースにおけるデータ表現の一種です。コンテキストによって"空"もしくは"長さ0の文字列"、”未知・不明”を意味します。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

8768閲覧

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

ikedayuuki

総合スコア24

Null

Nullとは、プログラミング言語やデータベースにおけるデータ表現の一種です。コンテキストによって"空"もしくは"長さ0の文字列"、”未知・不明”を意味します。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2021/06/26 14:20

編集2021/06/26 14:53

前提・実現したいこと

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

該当のソースコード

html

1<input type="file" class = "bg-white" id="myImage" 2 accept="image/*" onchange="setImage(this);" 3onclick="this.value = '';" > 4 @if("preview" === null) 5 <img src="image/foge.jpg"> 6 @endif 7 <img id="preview" > 8 <script> 9 function setImage(target) { 10 var reader = new FileReader(); 11 reader.onload = function (e) { 12 document.getElementById("preview").setAttribute('src', e.target.result); 13 } 14 reader.readAsDataURL(target.files[0]); 15 }; 16</script>

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2021/06/26 14:42

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

2021/06/26 14:58

ファイルを選択していなければデフォルトの画像を予備でしたいです。 jsにも ''' if(target === null){ document.write(’<img src="image/foge.jpg">’); } ''' など試しましたがうまく行きません
m.ts10806

2021/06/26 23:27

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

回答1

0

ベストアンサー

ここでは、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など)

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

投稿2021/06/26 19:43

編集2021/06/27 00:45
hallen0225

総合スコア587

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikedayuuki

2021/06/27 01:35

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.40%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問