【HTML・JavaScript】質問フォームから画像やコメントを記入して、テーブルの中に入れたい

実現したいこと

質問フォームから画像やコメントを記入して、テーブルの中に入れたい

↓↓実際に表示されているイメージです↓↓
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

前提

HTMLとJavascriptを使って”表への追加項目”の内容をテーブルにまとめられるようなポートフォリオを作りたい。

試したこと

WEBの全体像です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

下記のようにコードを作成して試してみましたがテーブル内に画像が組み込めませんでした。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PAIN LIST</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="/send_url.js"></script>
  </head>
  <body>
    <header>
      <a href="/" class="header-logo">PAIN LIST</a>
    </header>
  
    <div class="container">
      <div class="container-header">
        <h1>疼痛状況</h1>
      </div>

      <table id="table1" >
        <tr>
          <th width="18%">画像</th>
          <th width="20%">動作・部位</th>
          <th width="8%">痛みの度合い</th>
          <th width="51%">memo</th>
        </tr>
        
        <tr>            
          <td width="18%">(例)画像</td>
          <td width="20%">(例)ジョギング・膝関節</td>
          <td width="8%">(例)強い</td>
          <td width="51%">(例)10分程度ジョギングをすると膝の内側が徐々に痛くなってくる。</td>
        </tr>
          
      </table>
      
       <b><a id="download" href="#" download="pain_list.csv" onclick="handleDownload()" class="csvdownload">csvファイルダウンロード</a></b>
      


       <hr color="#896000" size="3px">



       <h4>表への追加項目</h4>

         <p class="form-label" >画像</p>
         

         <input name="table1_cell_value" type="file" id="th_value1"  multiple>

           <!-- ここにプレビュー画像を追加する -->
           <div id="preview"></div>
  
           <script>
  
            function previewFile(file) {
             // プレビュー画像を追加する要素
              const preview = document.getElementById('preview');
  
             // FileReaderオブジェクトを作成
             const reader = new FileReader();
  
             // ファイルが読み込まれたときに実行する
              reader.onload = function (e) {
               const imageUrl = e.target.result; // 画像のURLはevent.target.resultで呼び出せる
                const img = document.createElement("img"); // img要素を作成
               img.src = imageUrl; // 画像のURLをimg要素にセット
               preview.appendChild(img); // #previewの中に追加
             }
  
              // ファイルを読み込む
              reader.readAsDataURL(file);
            }
  
  
            // <input>でファイルが選択されたときの処理
            const fileInput = document.getElementById('th_value1');
            const handleFileSelect = () => {
             const files = fileInput.files;
             for (let i = 0; i < files.length; i++) {
               previewFile(files[i]);
             }
            }
            fileInput.addEventListener('change', handleFileSelect);
  
           </script>


         <p class="form-label" >動作・部位</p>
         <input name="table1_cell_value" id="th_value2" type="text" class="form-text">
         <p class="form-label" >痛みの度合い</p>
　　　　　<input name="table1_cell_value" id="th_value3" type="text" class="form-label2" >
         <p class="form-label" >memo</p>
         <input name="table1_cell_value" id="th_value4" type="text" class="form-label2" >
    

        <input class="delete-submit" type="button" value="表に上記内容を追加 (クリック)" onclick="add_line()" >

      </div>


       <script>
        function previewFile(hoge){
         var fileData = new FileReader();
         fileData.onload = (function() {
           //id属性が付与されているimgタグのsrc属性に、fileReaderで取得した値の結果を入力することで
           //プレビュー表示している
           document.getElementById('preview').src = fileData.result;
         });
         fileData.readAsDataURL(hoge.files[0]);
        }
       </script>
        
      <script>
        //ここから表の行追加のコード
        function add_line() {
          for(var i = 0; i < document.getElementsByName("table1_cell_value").length; i++){
            if(document.getElementsByName("table1_cell_value")[i].value ==""){
                alert("未入力項目があります。");
                return false;
            }
          }

          var table = document.getElementById('table1');//id=table1という要素を取得
          var row = table.insertRow(-1);//id=table1の中にtrタグを最後の子要素として追加
          var cells = new Array();
          for(var i = 0; i < table.rows[0].cells.length; i++){
            cells[i] = row.insertCell(-1);//新しく作ったrowの中にtrタグを最後の子要素として追加
            cells[i].innerText=document.getElementsByName("table1_cell_value")[i].value;
            document.getElementsByName("table1_cell_value")[i].value="";//入力フィールドの初期化
          }
        }
        //ここまで表の列追加のコード
        //ここからCSV出力＆ダウンロード
        function handleDownload() {
            var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);//文字コードをBOM付きUTF-8に指定
            var table = document.getElementById('table1');//id=table1という要素を取得
            var data_csv="";//ここに文字データとして値を格納していく
    
            for(var i = 0;  i < table.rows.length; i++){
              for(var j = 0; j < table.rows[i].cells.length; j++){
                data_csv += table.rows[i].cells[j].innerText;//HTML中の表のセル値をdata_csvに格納
                if(j == table.rows[i].cells.length-1) data_csv += "\n";//行終わりに改行コードを追加
                else data_csv += ",";//セル値の区切り文字として,を追加
              }
            }
    
            var blob = new Blob([ bom, data_csv], { "type" : "text/csv" });//data_csvのデータをcsvとしてダウンロードする関数
            if (window.navigator.msSaveBlob) { //IEの場合の処理
                window.navigator.msSaveBlob(blob, "pain_list.csv"); 
                //window.navigator.msSaveOrOpenBlob(blob, "test.csv");// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
            } else {
                document.getElementById("download").href = window.URL.createObjectURL(blob);
            }
    
            delete data_csv;//data_csvオブジェクトはもういらないので消去してメモリを開放
        }
        //ここまでCSV出力＆ダウンロード
    </script>
    </div>
  </body>
</html>

試してみた結果

上記のコードを試した結果、下の画像のように文字のみがテーブルに入ってしまう状況です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

どのように書き換えれば目標とする動作になるのか路頭に迷っている状況です。
ご教授いただけたら幸いです。
何卒宜しくお願い致します。

yambejp

2023/09/26 01:34 編集

サーバーに送らない画像ファイルは表示されても保存はされないですが大丈夫ですか？しかもmultipleになっていますが、１セルに複数の画像を表示する想定でしょうか？画像サイズが大きいとかなり見づらい表になりそうですが・・・

taketakethon

2023/09/26 01:34

ご質問ありがとうございます。データベースなどに保存されなくても良いです。テーブルに入れてCSVファイルとして保存できればうれしいです。

taketakethon

2023/09/26 01:36

追記します。一つの画像のみにしようと思っています。 multipleは修正します！

yambejp

2023/09/26 02:06

> テーブルに入れてCSVファイルとして保存できればうれしいです。一時保存された画像ファイルをCSVにするという意味がよくわかりませんが・・・

taketakethon

2023/09/26 03:03

わかりづらい回答で申し訳ありません。保存されなくとも画像がテーブルに入れるようになればうれしいです。

yambejp

2023/09/26 03:04

一旦CSV出力は保留としてください画像を埋め込む方法は回答のとおりです

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

回答2件

ベストアンサー

参考までに

javascript
1<script>
2let img=null;
3document.addEventListener('click',({target})=>{
4  if(target.matches('#add')){
5    const addrow=`<tr><td></td><td></td><td></td><td></td></tr>`;
6    const tr = Object.assign(document.createElement("template"),{innerHTML:addrow}).content.querySelector('tr');
7    if(img){
8      tr.querySelector('td').appendChild(img);
9    }
10    tr.querySelector('td:nth-child(2)').textContent=a.value;
11    tr.querySelector('td:nth-child(3)').textContent=b.value;
12    tr.querySelector('td:nth-child(4)').textContent=c.value;
13    t1.querySelector('tbody').appendChild(tr);
14    a.value="";
15    b.value="";
16    c.value="";
17    myfile.value="";
18    img=null;
19  }
20});
21document.addEventListener('change',e=>{
22  if(e.target.matches('#myfile')){
23    const preview =  document.querySelector(".preview");
24    const file=e.target.files[0];
25    if(/image/.test(file.type)){
26      const reader = new FileReader();
27      reader.addEventListener('load',e=>{
28        img =Object.assign(document.createElement( 'img' ),{
29          'src':e.target.result,
30          'style':'max-width:150px',
31        });
32      }); 
33      reader.readAsDataURL(file);
34    }
35  }
36});
37</script> 
38<table border id="t1">
39<thead>
40<tr>
41<th>img</th>
42<th>a</th>
43<th>b</th>
44<th>c</th>
45</tr>
46</thead>
47<tbody>
48<tr>
49<td>画像</td>
50<td>a</td>
51<td>b</td>
52<td>c</td>
53</tr>
54</tbody>
55</table>
56<input type="file" id="myfile"><br>
57a:<input id="a"><br>
58b:<input id="b"><br>
59c:<input id="c"><br>
60
61<input type="button" value="追加" id="add">

投稿2023/09/26 02:41

yambejp

総合スコア117674

taketakethon

2023/09/26 03:17

上記のコードを試したところ、行おうとしていたことができました。無理なお願いをかなえてくださりありがとうございました。

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

すでにご自身で書かれていますが、FileReader API の readAsDataURL メソッドを使うのがいいと思います。
add_line()のループの中で同じ処理をするのがいいでしょう。その場合には、FileReader の load イベントハンドラの中でループを処理するのが現行のコードを生かしやすいと思います。
つまり、以下のような感じです。

js
1function add_line() {
2
3//...
4
5  // FileReaderオブジェクトを作成
6  const reader = new FileReader();
7
8  // ファイルが読み込まれたときに実行する
9  reader.onload = function (e) {
10    const imageUrl = e.target.result; // 画像のURLはevent.target.resultで呼び出せる
11
12//...
13
14    for (var i = 0; i < table.rows[0].cells.length; i++) {
15      cells[i] = row.insertCell(-1);//新しく作ったrowの中にtrタグを最後の子要素として追加
16      if (i == 0) cells[i].appendChild(img) else
17      cells[i].innerText = document.getElementsByName("table1_cell_value")[i].value;
18
19//...
20
21  // ファイルを読み込む
22  reader.readAsDataURL(document.getElementsByName("table1_cell_value")[0].files[0]);
23
24}