ざっくりこんな感じで
html
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3 image_preview.setAttribute('hidden',1);
4});
5document.addEventListener('change',e=>{
6 if(e.target.matches('[type=file]')){
7 console.log(e);
8 var file = e.target.files[0];
9 const type=file.type;
10 const filename=file.name;
11 const blob=new Blob([file],{type:type});
12 image_preview.removeAttribute('hidden');
13 const image=document.querySelector('#image_preview img');
14 image.src = URL.createObjectURL(blob);
15 const caption=document.querySelector('#image_preview figcaption');
16 caption.textContent=filename;
17 select_image.setAttribute('hidden',1);
18 }
19});
20document.addEventListener('click',e=>{
21 if(e.target.matches('#image_preview img')){
22 select_image.click();
23 }
24 if(e.target.matches('#remove_image')){
25 select_image.removeAttribute('hidden');
26 select_image.value='';
27 image_preview.setAttribute('hidden',1);
28 }
29});
30</script>
31<div>
32<p>
33<input type="file" name="image" id="select_image" accept="image/*">
34</p>
35<figure id="image_preview">
36<img src="" >
37<figcaption></figcaption>
38<button name="rmImage" id="remove_image" type="button">リセット</button>
39</figure>
40</div>
調整
「ファイルを選択」ボタンの横に「選択されていません」の文言が表示されている状態が初期状態なので、その文言だけを非表示にしたいという意味でした。
これはHTMLの仕様なのでいやなら別にボタンをつくることです
html
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3 image_preview.setAttribute('hidden',1);
4 select_image.setAttribute('hidden',1);
5});
6document.addEventListener('change',({target})=>{
7 if(target.matches('[type=file]')){
8 const file = target.files[0];
9 image_preview.removeAttribute('hidden');
10 const image=document.querySelector('#image_preview img');
11 image.src = URL.createObjectURL(file);
12 const caption=document.querySelector('#image_preview figcaption');
13 caption.textContent=file.name;
14 btn.setAttribute('hidden',1);
15 }
16});
17document.addEventListener('click',({target})=>{
18 if(target.matches('#image_preview img')){
19 select_image.click();
20 }
21 if(target.matches('#btn')){
22 select_image.click();
23 }
24 if(target.matches('#remove_image')){
25 select_image.value='';
26 image_preview.setAttribute('hidden',1);
27 btn.removeAttribute('hidden');
28 }
29});
30</script>
31<div>
32<p>
33<input type="file" name="image" id="select_image" accept="image/*">
34<input type="button" value="ファイル選択" id="btn">
35</p>
36<figure id="image_preview">
37<img src="" >
38<figcaption></figcaption>
39<button name="rmImage" id="remove_image" type="button">リセット</button>
40</figure>
41</div>
※Lhankor_Mhyさんの指摘を反映済み