javascript　inputした画像が表示されない

したいこと

　画像ファイルを選択し、読み込み、その画像を表示すること
（画像ファイル読み込みは一つだけで）

###問題点
画像が表示されない
ちなみにエラーはコンソールでは確認できなかった

コード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>New Tab</title>
8  <link rel="stylesheet" href="./index.css">
9  <script src="./index.js"></script>
10</head>
11
12<body>
13  <!-- コンテンツを記述 -->
14
15<input type="file" id="imgfile" accept=".png,.jpg,.jpeg,.pdf,.gif">
16<input type="button" value="send me" id="imgbutton" onclick="imgchange()">
17<div id="imgview"></div>
18  
19</body>
20</html>

javascript
1function imgchange(){
2    var fileinput=document.getElementById('imgfile');
3    fileinput.addEventListener('change',function(e){
4        var uploadfileurl=URL.createObjectURL(e.target.files);
5        
6         var img_element=document.createElement("img");
7         img_element.src=uploadfileurl;
8         img_element.alt=e.target.files.name;
9         img_element.width=100;
10         img_element.onload=function(){
11             URL.revokeObjectURL(this.src)
12         }
13         var div_element=document.getElementsById('imgview');
14         div_element.appendChild(img_element)
15    })
16
17}

ご教授願いたいところ

①どこが問題となって画像が表示できていないのか
②どのようにしたら画像を表示できるか
③「javascript」の3,4行目の「e」が何を意味しているのか、何の意味があるのか

参考にしたサイト

https://gray-code.com/javascript/get-url-object-from-file-object/

その他

html,javascript初学者なので至らない点もありますがご了承ください。

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

回答2件

ベストアンサー

問題は二つあります。

e.target.filesは配列でURL.createObjectURL()の一つ目の引数はFileを欲しがっています。

なので URL.createObjectURL(e.target.files[0])で一つ目のファイルを指定すればいいです。

getElementsByIdの書き間違え。sが多いです。正しいのはgetElementByIdです。idは一つしかないので複数形式のelementだとおかしいです。

この二つを直せば上手く拳動しました。

投稿2022/01/01 14:15

skys215

総合スコア910

unknock

2022/01/01 17:27

画像が出るようになりました。ありがとうございました。ですが、少々問題点があったのでもし何故か存じていましたら教えていただきたいです。

unknock

2022/01/01 17:32

①ファイルを入れて、ボタンを押して送信しても何も起こらず、次に違うファイルを入れると最初ファイルの時に押した回数だけ画像が出る点 ②出る画像は最新のファイルの一枚のみの表示にする方法（できれば）

skys215

2022/01/02 02:31

今のコードだとボタンを押してからフィールドの変動を監視することになってます。つまり、ボタンを押してから、フィールドの変動の気づいて、プレビューを表示する様です。なのでページがロード完了後すぐにフィールドの変動を監視すれば、ファイルを選択後プレビューを表示することができます。具体的にはonloadイベントです。 https://developer.mozilla.org/ja/docs/Web/API/Window/load_event

unknock

2022/01/02 04:19

ボタンを消して、onloadを使用したところプレビュー表示することができました。ありがとうございます！

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