複数の画像アップロードするフォームでプレビュー表示箇所を指定する

Question

複数の画像アップロードするフォームがあります
画像をアップロードした場合にプレビューを表示しますが、
それぞれアップロードしたフォームの横へプレビューを表示したいと思っていますが、
2番めのフォームへアップロードしても1番目のプレビューへ表示されます。
プレビュー表示部分が一番目と二番目で同じなので当たり前なのですが
プレビュー箇所をそれぞれのinputフォーム横に指定するにはどうすればいいのでしょうか？

//ひとつめのアップロードフォーム
<div class="form-group">
    <label for="file_img_111" class="">
        <div class="userProfileImg_description">画像をアップロード</div>
        <i class="fas fa-camera fa-3x"></i>
        <input type="file" id="file_img_prize" name="img_111[]">
    </label>
    <div class="userImgPreview" id="userImgPreview">
        <img id="thumbnail" class="userImgPreview_content" accept="image/*" src="">
        <p class="userImgPreview_text">画像をアップロード済み</p>
    </div>
</div>
//ふたつめのアップロードフォーム
<div class="form-group">
    <label for="file_img_222" class="">
        <div class="userProfileImg_description">画像をアップロード</div>
        <i class="fas fa-camera fa-3x"></i>
        <input type="file" id="file_img_prize" name="img_222[]">
    </label>
    <div class="userImgPreview" id="userImgPreview">
        <img id="thumbnail" class="userImgPreview_content" accept="image/*" src="">
        <p class="userImgPreview_text">画像をアップロード済み</p>
    </div>
</div>

<script>
    $("INPUT[id^='file_']").on("change", function(e) {
    var file = e.target.files[0];

    // 画像ファイル以外は処理停止
    if(file.type.indexOf('image') < 0){
        alert("画像ファイルを指定してください。");
        return false;
    }

    console.log(e.target.id + " がクリックされました。");

    if (e.target.files.length) {
        reader = new FileReader();

        reader.onload = function (e) {
        var userThumbnail;

        userThumbnail = document.getElementById('thumbnail');
        $("#userImgPreview").addClass("is-active");
        userThumbnail.setAttribute('src', e.target.result);
        };

        return reader.readAsDataURL(e.target.files[0]);
    }
    });
</script>

やってみたこと

//js側
div = document.getElementByClassName('file_img_111');//新たにHTML側へclassを追加
userThumbnail = div.getElementById('thumbnail');

//html側
<div class="file_img_111">
    <div class="userImgPreview" id="userImgPreview">
        <img id="thumbnail" class="userImgPreview_content" accept="image/*" src="">
        <p class="userImgPreview_text">画像をアップロード済み</p>
    </div>
</div>
<div class="file_img_222">
    <div class="userImgPreview" id="userImgPreview">
        <img id="thumbnail" class="userImgPreview_content" accept="image/*" src="">
        <p class="userImgPreview_text">画像をアップロード済み</p>
    </div>
</div>

よろしくおねがいします

Comments

[yambejp]

enctypeをmultipart/form-data設定したformが見当たりませんが
最終的にサーバーへの送信はしないのでしょうか？

[creative_09]

全体的なフォームはひとつで、一つのフォームの中でインプット要素として複数の画像がアップロードできる形でした
複数のフォームがあるような言い方となっていますが申し訳ございません

また、最終的にサーバーへは送信し、送信の受け取りもできています
プレビュー箇所が最初のインプットの場所一箇所になってしまうのをそれぞれの箇所へプレビューさせたいのです。
確認画面でなどといった話でもありません。誤解を招いていたらすみません
よろしくお願い致します

Answer 1

HTMLの仕様上 idは同一HTML上で重複できません。別のものをつけるか、クラスにでもしましょう。

$( e.target ).closest( '.form-group' ).find( '.userImgPreview' ).addClass( 'is-active' );

【.closest() | jQuery API Documentation】
https://api.jquery.com/closest/

Comments

[creative_09]

ありがとうございます。
userThumbnail = document.getElementById('thumbnail');
$("#userImgPreview").addClass("is-active");
userThumbnail.setAttribute('src', e.target.result);
};
の箇所を提示していただいたコードを追加し
userThumbnail = document.getElementById('thumbnail');
//$("#userImgPreview").addClass("is-active");
　　　$( e.target ).closest( '.form-group' ).find( '.userImgPreview' ).addClass( 'is-active' );
userThumbnail.setAttribute('src', e.target.result);
};
のようにすると'is-active' idが追加されず、
この外で記述するとうまくいきました。
そとで使うと、setAttribute('src', e.target.result)が」うまく動かないです

idは重複してはダメなんですね。
勉強になります

[kei344]

「 $("INPUT[id^='file_']").on("change", function(e)」と「reader.onload = function (e)」とで同じ仮引数を使っているからそうなりますね。
また、提示したのは方法だけで、そこを書き換えたら全部解決するコードではありません。「userThumbnail = document.getElementById('thumbnail');」も同じようにjQueryで取得してjQueryで値を書き換えましょう。

[creative_09]

勉強になります
なるほどと思いなながら、調べて理解しながらやっているつもりですが、srcに値が入ってくれません
一番近い親要素.form-groupを探し、みつかればis-activeをつける。
ということを理解しました

$( e.target ).closest( '.form-group' ).find( '.userImgPreview' ).addClass( 'is-active' );
$( e.target ).closest( '.form-group' ).find( '#thumbnail' ).setAttribute('src', e.target.result);
このようにし、
「reader.onload = function (e)」部分はコメントアウトしました

if (e.target.files.length) {
reader = new FileReader();

$( e.target ).closest( '.form-group' ).find( '.userImgPreview' ).addClass( 'is-active' );
$( e.target ).closest( '.form-group' ).find( '#thumbnail' ).setAttribute('src', 'yyyyyy');
// $( e.target ).closest( '.form-group' ).find( '.thumbnail' ).setAttribute('src', e.target.result);

// reader.onload = function (e) {
// var userThumbnail;
// userThumbnail = document.getElementById('thumbnail');
// $("#userImgPreview").addClass("is-active");
// userThumbnail.setAttribute('src', e.target.result);

// };

return reader.readAsDataURL(e.target.files[0]);
}
srcに値が入ってくれません。。

[creative_09]

//　$( e.target ).closest( '.form-group' ).find( '#thumbnail' ).setAttribute('src', 'yyyyyy');
$( e.target ).closest( '.form-group' ).find( '.thumbnail' ).setAttribute('src', e.target.result);
としています

[kei344]

> 「reader.onload = function (e)」部分はコメントアウトしました
e.target.result の e はここで宣言しているものだからそうなります。

[creative_09]

この状態でsrcに値が入ってくれないのはなぜでしょうか。

[kei344]

e.target.resultが無いから。

[creative_09]

$( e.target ).closest( '.form-group' ).find( '.userImgPreview' ).addClass( 'is-active' );
$( e.target ).closest( '.form-group' ).find( '#thumbnail' ).setAttribute('src', e.target.result);
のようにしていますが、
product:665 Uncaught TypeError: $(...).closest(...).find(...).setAttribute is not a function
というエラーがでています

[kei344]

onload 内じゃないとe.target.resultが採れないのはわかっていますか？
あと、jQueryにsetAttribute なんてメソッドはないですよ。

【.attr() | jQuery API Documentation】
https://api.jquery.com/attr/

[creative_09]

少しづつ見えてきた気がします
もう少しあれこれしてみます。
何を調べるか何をみるか教えていただけて助かります

[creative_09]

以下のような感じでimage_fileというクラスを付与しました。

<div class="form-group image_file">
<label for="file_img_product" class="">
<div class="userProfileImg_description">商品メイン画像</div>
<i class="fas fa-camera fa-3x"></i>
<input type="file" id="file_img_product" name="img_product">
</label>

<div class="userImgPreview" id="userImgPreview">
<img id="thumbnail" class="userImgPreview_content" accept="image/*" src="">
<p class="userImgPreview_text">商品のメイン画像をアップロード済み</p>
</div>
</div>

<script>
$(".image_file").on("change", function(e) {
var file = e.target.files[0];
var find_thumbnail = $(this).children().find('#thumbnail');

// 画像ファイル以外は処理停止
if(file.type.indexOf('image') < 0){
alert("画像ファイルを指定してください。");
return false;
}

console.log(e.target.id + " がクリックされました。");

if (e.target.files.length) {
reader = new FileReader();

$( e.target ).closest( '.form-group' ).find( '.userImgPreview' ).addClass( 'is-active' );
reader.onload = function (e) {

find_thumbnail.attr('src', e.target.result);
};

return reader.readAsDataURL(e.target.files[0]);
}
});
</script>

のように書いてみたところ、思った通りの動作が出来ました。
ありがとうございます。！！
ただ、偶然できただけのような感じもしますので、
おかしいところなどはないでしょうか？