ajax通信している内容を入力フォームに戻ってきたときに表示したい

実現したいこと

ajaxを使用している画像アップロードのプレビューとサブカテゴリーの値を保持して確認画面から戻ってきた場合でも表示されている状態にしたい
ajaxを使うのが初めてなのですが、こういう入力フォームで皆さんはどのようにして表示させているのでしょうか

該当のソースコード

<form action="/product_regist_check" method="POST" enctype="multipart/form-data">
      @csrf
      
      <div>
        <span>商品カテゴリ</span>
      </div>
        
      <div>
        <select name="category" id="category">
          <option value="" style="display: none;">選択してください</option>
          @foreach ($categories as $category)
          <option value="{{ $category->id }}" {{ old('category') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
          @endforeach
        </select>

        <select name="sub_category" id="sub_category">
          <option value="">サブカテゴリーを選択してください</option>
        </select>
      </div>

      @error('category')
        <p class="error">＊カテゴリーを選択してください</p>
      @enderror
      @error('sub_category')
        <p class="error">＊サブカテゴリーを選択してください</p>
      @enderror

      <div>
        <span>商品写真</span>    
        <div>
          <span>写真1</span>
          <div id="preview1"></div>
          <input type="file" name="image1" accept="image/jpg, image/jpeg, image/png, image/gif" onchange="previewImage(this, 'preview1')"/>
          @error('image1')
          <p class="error">＊jpg、jpeg、png、gif形式で10MB以下の画像をアップロードしてください</p>
          @enderror
        </div>   
      </div>

      <div class="btn">
        <input type="submit" value="確認画面へ"><br>
        <input type="button" value="トップに戻る" onclick="location.href='/index'">
      </div>
    </form>
  </div>
  
  <script>
    function previewImage(input, previewId) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
          $('#' + previewId).html('<img src="' + e.target.result + '" style="max-width: 200px; max-height: 200px;" />');
        }

        reader.readAsDataURL(input.files[0]);
      }
    }


    $(document).ready(function() {
        //サブカテゴリー
        $('#category').on('change', function() {
            var categoryId = $(this).val();
            if (categoryId) {
                $.ajax({
                    url: '/get_subcategories',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        categoryId: categoryId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        $('#sub_category').empty();
                        $.each(data, function(key, value) {
                          $('#sub_category').append('<option value="' + value.id + '" ' + '>' + value.name + '</option>');
                        });
                    }
                });
            }
        });
    });
  </script>

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

laravel6
PHP7

退会済みユーザー

2023/06/17 07:57

質問者さん、その後無言ですが、Q&A を続ける気があるなら下の回答のコメント欄での私の質問（下に再掲します）に答えてください。 > その後入力フォームに戻った時に、画像とサブカテゴリーもほかの項目と同じように選択した状態を維持したいのです。「選択した状態を維持」というのはどういうことですか？　最初の画面にある input type="file" がファイルを選択した状態を、確認画面に遷移してから戻ったときに、同じファイルを選択しているようにしたいということですか？

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

回答1件

ajaxを使用している画像アップロードのプレビューとサブカテゴリーの値を保持して確認画面から戻ってきた場合でも表示されている状態にしたい

質問者さんのやりたいことがよく分かってないですが、

(1) input type="file" でユーザーが画像を選択するとそれがブラウザ上に表示される。

(2) それをユーザーが確認後、ボタンクリックなどの操作をして ajax でサーバーに画像データを送信する。

(3）サーバーで画像データを受信して処理が完了したら、完了したという情報をブラウザに応答として返す。

(4) ブラウザはその応答を受け取って表示する。

・・・というようなことで良いのでしょうか？

それで良ければ、以下の記事が参考になりませんか？

canvas の画像をアップロード (その 2)
http://surferonwww.info/BlogEngine/post/2022/11/20/upload-image-drawn-on-html5-canvas-2nd.aspx

サーバー側は ASP.NET Core MVC アプリですが、クライアント側のコードはほぼそのまま使えるはずです。

JavaScript のコードに非同期関数を使うともう少し分かりやすくなるので、そのあたりを書いた記事も紹介しておきます。

以下の記事の下の方のコードを見てください。

JavaScript の非同期関数
http://surferonwww.info/BlogEngine/post/2022/11/23/async-function-in-javascript.aspx

【追記】

上の記事では toDataURL メソッドを使って画像データを DataURL 形式の文字列として取得し JSON 文字列として送信しています。データは BASE64 でエンコードされるのでバイナリ形式よりサイズが約 1.3 倍大きくなります。

toBlob メソッドを使って画像データをバイナリ形式で取得し multipart/form-data 形式で送信することもできます。具体例は以下の記事を見てください。

img 要素の画像データを取得してアップロード
http://surferonwww.info/BlogEngine/post/2023/02/01/obtain-image-data-displayed-on-html-img-element-to-server-and-upload-it-to-server.aspx

投稿2023/06/16 07:50

編集2023/06/16 07:56

退会済みユーザー

総合スコア0

medu

2023/06/16 08:49

ご回答ありがとうございます。やりたいことは入力フォームページでアップロードする画像とサブカテゴリーを選択して確認画面に進み、その後入力フォームに戻った時に、画像とサブカテゴリーもほかの項目と同じように選択した状態を維持したいのです。ほかの項目はjavascriptやajaxを使ってないのでシンプルにold関数を使って入力状態を維持できているのですが、、、わかりにくく申し訳ございません。

退会済みユーザー

2023/06/16 09:28

> その後入力フォームに戻った時に、画像とサブカテゴリーもほかの項目と同じように選択した状態を維持したいのです。「選択した状態を維持」というのはどういうことですか？　最初の画面にある input type="file" がファイルを選択した状態を、確認画面に遷移してから戻ったときに、同じファイルを選択しているようにしたいということですか？　つまり以下のスレッドの話と同じようなことですか？ asp.net core で input type="file" の選択内容を保持する https://teratail.com/questions/13reh9zgqqezh4

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