input type file プレビュー画像のリセット、同一ページ内に複数ある場合。

Question

こちらの私の質問の続きになります。
input type file プレビュー画像のリセット

おかげさまで、
input file プレビュー画像のリセットができました。

しかし1点、私にとって不都合がありました。
それは、<form>〜</form>が複数ある場合です。
.previewと.deleteの全てremoveの対象になってしまいます。

実現したいことは、
同一ページ内に<form>タグが複数あり
それぞれ独立しています。
中身の要素は同じです。

それぞれのformにある、
type=fileにて、画像のリセットが独立している、他のformに影響を与えない仕様になります。

これを、隣接する、もしくは同じ階層の
.previewと.deleteのみをremoveの対象とするコードにすれば
解決できると思いましたが、試行錯誤しているのですが分かりません。

アドバイス頂ければ幸いです。
どうぞよろしくお願い致します。

$(function(){
$('input[type=file]').on('change', function () {
var self=$(this);
var file = $(this).prop('files')[0];
var reader = new FileReader();
reader.addEventListener('load',e=>{
$('.preview').remove();
$('.delete').remove();
self.closest('.camera-wrap')
.append($('<img class="preview">').attr({src:e.target.result}))
.append($('<button type="reset" class="delete"></button>'));
});
reader.readAsDataURL(file);
});
$('form').on('reset',function(){
$('.preview').remove();
$('.delete').remove();
});
});

<form method="post" enctype="multipart/form-data">
<div class='camera-wrap'><label class='camera' for='camera'><input type="file" id='camera' name='file'></label></div>
</form>

以下がinput fileがクリックされたときのコードになります。

<form method="post" enctype="multipart/form-data">
<div class="camera-wrap"><label class="camera" for="camera"><input type="file" id="camera" name="file"></label><img class="preview" src=""><button type="reset" class="delete"></button></div>
</form>

<form method="post" enctype="multipart/form-data">
<div class="camera-wrap"><label class="camera" for="camera497"><input type="file" id="camera497" name="file"></label><img class="preview" src=""><button type="reset" class="delete"></button></div>
</form>

Comments

[yambejp]

仕様をもう少し詳しく説明ください

type=fileが2箇所あるとして、両方とも送るなら同じformに入れる必要があります
（例示のものは別々のフォームに入っていますが、これだと排他的にしかサブミットできないです）
同じforｍにおいてリセットボタンはすべてのinput 要素をリセットしてはいけないのでしょうか？
個別にファイルごとにリセットボタンが必要？
その場合全体リセットは不要？

[退会済みユーザー]

type＝fileは2箇所あり、それぞれ独立しております。

それぞれ、画像のプレビュー表示と画像のリセットをしたいです。独立していて影響されない。

同じformにおいて、リセットボタンはtype=fileのみリセットしたいです。それ以外のtype=textなどはリセットされない。

全体リセットが何を指すか、勉強不足で分かりかねます。申し訳ございません。伝われば良いのですが。

今から質問内容を追加いたします。

Answer 1

普通にやるならこんな感じ

<script>
$(function(){
  $('input[type=file]').on('change', function () {
    var self=$(this);
    var file = $(this).prop('files')[0];
    var reader = new FileReader();
    reader.addEventListener('load',e=>{
      self.closest('label').find('.preview,.delete').remove().end()
        .append($('<img class="preview">').attr({src:e.target.result}))
        .append($('<button type="button" class="delete">削除</button>'));
    });
    reader.readAsDataURL(file);
  });
  $(document).on('click','.delete',function(){
    $(this).closest('.camera-wrap').find('.preview,.delete').remove().end().find('[type=file]').val('');
  });
  $('form').on('reset',function(){
    $(this).find('.preview,.delete').remove();
  });
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="text" name="test">
<div class="camera-wrap">
<label class="camera">
<input type="file" name="file[]">
</label>
</div>
<div class="camera-wrap">
<label class="camera">
<input type="file" name="file[]">
</label>
</div>
<button type="reset">リセット</button>
<button type="submit" >送信</button>
</form>

ファイルを複数おくる必要がないならプレビューを残しておくのは混乱のもとでは？

form分割パターン

どれかで画像を選んだら別の画像は削除

<script>
$(function(){
  $('input[type=file]').on('change', function () {
    var self=$(this);
    var file = $(this).prop('files')[0];
    var reader = new FileReader();
    $('.preview,.delete').remove();
    $('[type=file]').not($(this)).val("");
    reader.addEventListener('load',e=>{
      self.closest('label')
        .append($('<img class="preview">').attr({src:e.target.result}))
        .append($('<button type="button" class="delete">削除</button>'));
    });
    reader.readAsDataURL(file);
  });
  $(document).on('click','.delete',function(){
    $(this).closest('.camera-wrap').find('.preview,.delete').remove().end().find('[type=file]').val('');
  });
  $('form').on('reset',function(){
    $(this).find('.preview,.delete').remove();
  });
});
</script>
<form method="post" enctype="multipart/form-data">
<input type="text" name="test">
<div class="camera-wrap">
<label class="camera">
<input type="file" name="file[]">
</label>
</div>
<button type="reset">リセット</button>
<button type="submit" >送信</button>
</form>
<form method="post" enctype="multipart/form-data">
<input type="text" name="test">
<div class="camera-wrap">
<label class="camera">
<input type="file" name="file[]">
</label>
</div>
<button type="reset">リセット</button>
<button type="submit" >送信</button>
</form>

Comments

[退会済みユーザー]

ありがとございます。
頂いた内容をもとに実装をしてみます。

説明が足らず申し訳ございません。

用途をご説明すると、例えば、
飲食店のメニューの登録です。
メニュー名と画像を登録する。

同一ページ内に、
登録済みのメニューが一覧表示されている。そのときに、プレビュー画像があった方が良いと思っています。

ご指摘の通りファイルは一つのみ送るのですが、自分がセレクトした画像がプレビューであった方がわかりやすいのでは？と考えています。

アドバイス頂きありがとございます。
これから試させていただきます。

[yambejp]

私の説明もわかりづらかったかもしれません
１つ目のtype=fileでAを選択したとして、やはり別のBを送ろうと思い
Bを改めて選択するとします。
いざサーバーにファイルを送るときにBしか送らないのであればAのプレビューが
残っていると、あたかもAも一緒に送るかのようにユーザーは認識してしまうので
formをわける（つまりAかBのどちらかしか送らない）場合であっても
他のプレビューは消すべきだ・・・ということです

一方、AもBも送るということであればformを一つにして、私の回答の通り組み込めばよいです

[退会済みユーザー]

ご説明ありがとうございます。
おかげさまで実装できました。

＞他のプレビューは消すべきだ・・・ということです
その仕様のつもりでした。

現状、
１つ目のtype=fileでAを選択したとして、Aのプレビューが表示される。
やはり別のBを送ろうと思いBを改めて選択するとします。
そのときに、Aのプレビューが消えて、Bのプレビューが表示されます。

いろいろと私が勘違いをしている部分があると思いますが。

[yambejp]

念の為フォームを分けたバージョンを用意しました
Aを選んだらBのプレビューや削除ボタンがきえるようにしてあります

[退会済みユーザー]

恐れ入ります。
拝見いたします。