<input type="file">の画像プレビュー表示を実装したが、<button>タグでクリアしたい。

前提・実現したいこと

<input type="file">を利用してブラウザから画像を登録できるUIを作成したいと思っています。
画像のプレビュー表示と、その登録した画像をクリアするためのクリアボタン（×）を作りたいです。
当方、jQueryのjavaScriptの知識に乏しいため、、プレビューの表示まではなんとか実現できたのですが、
画像をクリアするボタンの実装ができず困っております。。

お知恵を貸していただけませんでしょうか。。

発生している問題

<button class="file-delete"></button>をクリックするとファイル選択のクリアと、
プレビュー画像の表示領域に初期設定していた「parts_noimage.jpg」に戻したいです。

該当のソースコード

html
1<form>
2<div class="parts-file-select-wrp">
3<div class="ph">
4<div class="preview"><img src="/assets/images/parts_noimage.jpg" alt="" ></div>
5<button type="reset" class="file-delete" style="display: none;" ><img src="/assets/images/ico_form_file_delete.png" alt="" ></button>
6</div>
7<div class="input_file">
8<label for="imgFile">ファイルを選択<input accept="image/*" id="imgFile" type="file"></label>
9</div>
10</div>
11</form>

javaScrypt
1<script>
2$(function() {
3
4  // アップロードするファイルを選択
5  $('input[type=file]').change(function() {
6    var file = $(this).prop('files')[0];
7
8    // 画像以外は処理を停止
9    if (! file.type.match('image.*')) {
10      // クリア
11      $(this).val('');
12      $('.parts-file-select-wrp .ph .preview').html('');
13      return;
14    }
15
16    // プレビュー表示
17    var reader = new FileReader();
18    reader.onload = function() {
19      var img_src = $('<img>').attr('src', reader.result);
20      $('.parts-file-select-wrp .ph .preview').html(img_src);
21    }
22    reader.readAsDataURL(file);
23    $('.parts-file-select-wrp .ph .file-delete').show();
24  });
25
26    // プレビューを削除
27    $('.file-delete').click(
28        //ここから先がわかりません。。
29    );
30    
31});
32
33</script>

補足情報（FW/ツールのバージョンなど）

jQuery 2.2.1　を<head>内で読み込んでいます。

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

回答1件

ベストアンサー

<button> は type属性を省略した場合、 type="submit" として解釈され、フォームの送信が実行されます。フォームの action が指定されていない場合は自分自身 (現在表示されているページ) にリクエストを行います。つまり自分自身へのページ遷移となり、2020/01/15 16:02の編集で削除されてしまいましたが「単純にページがリロードされてしま」うという動きになります。
<button type="button"> とする、このままでclickイベントの中で preventDefault() するなどの方法で、フォームの送信を実行しないようにしてください。

提示されているHTMLからは、 <input> や <button> が　<form> で囲われているのかどうかわかりませんが、 <button type="reset"> とするか、clickイベントの中で <form> または <input> をリセットする処理と、サムネイル画像の初期化 ($('.preview > img').src をnoimageに戻す) 処理をすればよいでしょう。

投稿2020/01/15 07:10

thyda.eiqau

総合スコア2982

witoiw

2020/01/15 07:37

ありがとうございます！おっしゃる通り、 <button> のtype属性を省略していたので、「単純にページがリロード」されておりました。 <input> や <button> は <form> で囲われています。 <button type="reset"> に修正しました。「サムネイル画像の初期化 ($('.preview > img').src をnoimageに戻す) 処理をすればよい」とはどのような記述で実現できるのか、教えていただいてもよろしいでしょうか。mm