実現したいこと

以下のような仕様で実装したいのですが、どうしたらよいかわからないので、お教えいただけませんか？
ご面倒な仕様となり恐縮ですが、ご助言いただけたら嬉しく思います。

初期の「選択されていません」を非表示
選択した画像をプレビュー表示
画像を選択すると、非表示にしている削除ボタンを表示
画像を選択すると、inputは非表示にする
プレビュー画像の下にファイル名を表示
プレビュー画像をクリックすると、ファイルを再選択できる
削除ボタンをクリックすると、選択ファイルの削除（プレビュー画像を消す&inputを再表示）

発生している問題・分からないこと

画像をプレビューさせようとしたのですが、色々調べて試しても上手く動かすことができませんでした。

該当のソースコード

html
1<div>
2<p>
3    <input type="file" name="image" id="select_image" accept="image/*">
4</p>
5<p id="image_preview">
6    <img src="" alt="" style="display: none">
7    <button name="rmImage" id="remove_image" type="button" style="display: none">リセット</button>
8</p>
9</div>

javascript
1const inputElm = document.getElementById('select_image');
2inputElm.addEventListener('change', (e) => {
3    const file = e.target.files[0];
4    
5    const fileReader = new FileReader();
6    // 画像を読み込む
7    fileReader.readAsDataURL(file);
8
9    // 画像読み込み完了時の処理
10    fileReader.addEventListener('load', (e) => {
11        // #image_preview内のimgタグにファイルのURLを挿入？
12
13        // #remove_imageのボタンを表示させて、画像を削除できるようにする
14
15        // プレビュー画像をクリックしてファイルの再選択
16
17    });
18});
19

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

似たような例のサンプルコードを使ったりしたのですが、自分の思うような仕様にならない。または動かない。

補足

特になし

yambejp

2024/07/08 01:26

>初期の「選択されていません」を非表示この時点でなにもできないと思いますが、初期画面の想定を明示ください

nanazero

2024/07/08 02:44

input type="file"は「ファイルを選択」ボタンの横に「選択されていません」の文言が表示されている状態が初期状態なので、その文言だけを非表示にしたいという意味でした。分かりづらくすみません。

yambejp

2024/07/08 02:55

「文言だけを非表示」はボタンを別に用意するのが妥当です。回答に追記しておきました

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

回答1件

ベストアンサー

ざっくりこんな感じで

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>