<input type="file">でファイル選択した時に画像ファイルの表示と非表示について。

前提・実現したいこと

HTML・javascriptを全く知らない初心者です。
<input type="file">でファイル選択した時に画像ファイルの場合はサムネイルを表示したいです。再度ファイル選択でキャンセルや画像以外のファイルを選択した時には先に表示されたサムネイルを表示しないようにするにはどのようにしたらよろしいでしょうか？

試したこと（下記内容は別サイトを参考にしたため、正直内容はほとんど理解できていませんが・・・）

<!DOCTYPE html> <html> <head> <title>テスト/選択画像ファイルをプレビュー表示</title> </head> <body> <form> <input type="file"> </form> <div class="preview" /> </body> </html> <script type="text/javascript"> var $ = document; var $form = $.querySelector('form'); $.addEventListener('DOMContentLoaded', function() { $.querySelector('input[type="file"]').addEventListener('change', function(e) { var file = e.target.files[0], reader = new FileReader(), $preview = $.querySelector(".preview"), t = this; if(file.type.indexOf("image") < 0){ return false; } reader.onload = (function(file) { return function(e) { while ($preview.firstChild) $preview.removeChild($preview.firstChild); var img = document.createElement( 'img' ); img.setAttribute('src', e.target.result); img.setAttribute('width', '150px'); img.setAttribute('title', file.name); $preview.appendChild(img); }; })(file); reader.readAsDataURL(file); }); }); </script>

上記に記載したコードで実行すると画像ファイルを選択すると画像が表示されるのですが、再度画像ファイル以外のファイルを選択したり、キャンセルを選択しても最初に選択した画像が残ったままになってしまいます。

yambejp

2019/12/05 06:55

> サムネイルを表示したいサムネイルの定義をしてください。タテ・ヨコどちらかの最大値でも設定すれば良いのですか？

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

回答1件

ベストアンサー

ファイルのダイアログのキャンセルは拾えないみたいですね
どうしてもと言うならクリックした時点でクリアにする処理をいれるとか？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('input[type="file"]').addEventListener('click', e=>{
4    e.target.value="";
5    var preview =  document.querySelector(".preview");
6    var img = preview.querySelector("img");
7    if(img) preview.removeChild(img);
8  });
9  document.querySelector('input[type="file"]').addEventListener('change', e=>{
10    var file = e.target.files[0];
11    if(file){
12      var reader = new FileReader();
13      var preview =  document.querySelector(".preview");
14      var img = preview.querySelector("img");
15      if(img) preview.removeChild(img);
16      if(/image/.test(file.type)){
17        reader.addEventListener('load',e=>{
18          var img =Object.assign(document.createElement( 'img' ),{
19            'src':e.target.result,
20            'style':'max-width:150px',
21            'title':file.name,
22          });
23          preview.appendChild(img);
24        }); 
25        reader.readAsDataURL(file);
26      }; 
27    }
28  });
29});
30</script> 
31<form>
32<input type="file">
33</form>
34<div class="preview"></div>
35