jQueryとinput[type=file]を使って、一つずつ画像ファイルを選択した後にサムネイルを1個表示させたい

前提条件の流れ・したいこと

画像ファイルを一つ選択します
1つ目の画像サムネイルと2つ目のファイル選択ボタンが表示されます
2つ目のファイル選択ボタンから画像ファイルを一つ選択します
2つ目の画像サムネイルと3つ目のファイル選択ボタンが表示されます
以下ループ

###問題点
一つ目のサムネイルは表示されます。
ですが、二つ目の画像ファイルを選択したときのサムネイルがうまく表示できませんでした。

###エラー文
Uncaught TypeError: Cannot read property '0' of undefined

###ソース

javascript
1$("document").ready(function () {
2    $(".file_input").change(file_inputChange);
3});
4
5$(document).on('click', '.file_input', file_inputChange);
6function file_inputChange() {
7  if ($(".file_input").last().val() != "" && $(".upload_file").length <= 5) {
8    $('input[type=file]').after('<span></span>');
9    var counter = $('input[type=file]').length - 1;
10    console.log('input[type=file].length_is:' + counter);
11    var file = $(this).prop('files')[counter];
12    console.log("this_is_" + this);
13    if (!file.type.match('image.*')) {
14      $(this).val('');
15      $('span').html('');
16      return;
17    }
18    var reader = new FileReader();
19    reader.onload = function () {
20      const img_src = $('<img>').attr({ src: reader.result, height:"100px", width:"100px" });
21      $('span').html(img_src);
22    }
23    reader.readAsDataURL(file);
24    console.log("id = :" + $('div[class="image"]').attr('id'));
25    $("#image_list").append('<li><label><input type="text" name="image_title[]" class="upload_title"/></label></li>');
26    $("#image_list").append('<li><label><input type="file" name="images[]" class="file_input" accept="image/*"/></label></li>')
27      .bind('change', file_inputChange);;
28  }
29
30}

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9  <!-- <script src="./jquery.uploadThumbs.js"></script> -->
10  <script src="./knowledge_edit_ano_type.js"></script>
11  <title>画像読込テスト</title>
12</head>
13
14<body>
15  <ul id="image_list">
16    <li><input type="text" name="image_title[]" class="upload_title" /></li>
17    <li><input type="file" name="images[]" class="file_input" accept="image/*" /></li>
18  </ul>
19</body>
20
21</html>

###試してみたこと
input[type=file]の数をカウントしようとして、filesを読み込もうとしました。

javascript
1    var counter = $('input[type=file]').length - 1;
2    console.log('input[type=file].length_is:' + counter);
3    var file = $(this).prop('files')[counter];

ですが、2つ目から、var file = $(this).prop('files)[counter]のところで、
上記エラー文『Uncaught TypeError: Cannot read property '0' of undefined』が出て、
うまく走りませんでした。

皆様方からご助言を頂ければと存じます。
お手数ですが、宜しくお願い致します。

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

回答1件

ベストアンサー

javascript
1<script>
2$(function(){
3  $(document).on('change','.file_input',function(e){
4    var file = e.target.files[0];
5    var self = $(this);
6    var reader = new FileReader();
7    reader.addEventListener('load',function(){
8      self.after($('<img>').attr('src',reader.result).css('max-width',100));
9    });
10    reader.readAsDataURL(file);
11    $('#files').append($('<li>').append($(this).clone().val("")));
12  });
13});
14</script>
15<ul id="files">
16<li><input type="file" name="images[]" class="file_input" accept="image/*" /></li>
17</ul>

投稿2021/03/05 06:50

yambejp

総合スコア114769

unwind

2021/03/08 01:45

yambejp様返信が遅くなってしまい申し訳ございません。上記のプログラムで無事サムネイルが表示できました！お手数かけていただき、ありがとうございます。あと、画像のタイトルを入力するinput[type=text]もappendするときは、 ```javascript 　$("#files").append('<li><label><input type="text" name="image_title[]" class="upload_title"/></label></li>'); $('#files').append($('<li>').append($(this).clone().val(""))); ``` という風に書けばよろしいでしょうか。お手数ですが、宜しくお願い致します。

yambejp

2021/03/08 01:54

$(function(){ $(document).on('change','.file_input',function(e){ var file = e.target.files[0]; var self = $(this); var reader = new FileReader(); reader.addEventListener('load',function(){ self.after($('<img>').attr('src',reader.result).css('max-width',100)); }); reader.readAsDataURL(file); $('#files').append($('<li><input type="text" name="title[]" class="upload_title"></li>'),$('<li>').append($(this).clone().val(""))); }); });

unwind

2021/03/08 02:07

yambejp様。お早いご返信ありがとうございます。無事、目的の動作をすることが出来ました！何度もお手数かけていただき、ありがとうございます。

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