jsで画像ファイルのチェック処理後にフォーム用のデータを作成し、ajaxを実行したい

前提

jsでチェック処理後にフォームデータを生成し、ajaxを実行したいのでフォームタグを使用していない。

ここに質問の内容を詳しく書いてください。

jsでチェック処理後にフォームデータを生成し、ajaxを実行したいけど「$(thumbnail)[0].files[0]」を配列：dataに入れてajaxを実行するとエラーが出る。

実現したいこと

jsで入力データのチェック処理後に配列にデータを入れてajax用のデータを生成し、ajaxを実行したい

発生している問題・エラーメッセージ

ajaxを実行しようとすると下記のエラーが発生する。「$(thumbnail)[0].files[0];」がうまく入れれない
イメージ説明

該当のソースコード

html
1<div class="plan_edit_contents">
2　<div class="thumbnail-content">
3　　<label class="label" style="display: block;">{{ config('plan.message.thumbnail') }}</label>
4　　　<label>
5　　　　<div class="thumbnail">
6　　　　　<div class="delete_spot_photo delete_photo"><span>×</span></div>
7　　　　　<img class="thumbnail-img">
8　　　　　<span class="photo">写真追加</span>
9　　　　</div>
10　　　　<input type="file" name="thumbnail" id="thumbnail" hidden accept=".png, .jpeg, .jpg">
11　　　</label>
12　　</div>
13　　<div class="title-contents">
14　　　<label for="title" class="label">タイトル</label>
15　　　<input type="text" name="title" id="title" maxlength="100">
16　　　<span class="error_title error"></span>
17　　</div>
18</div>

js
1$(function(){
2  $('#spot_draft_btn').click(function(){
3    // バリデーションチェック
4    let formData = createDraftForm();
5    $.ajax({
6      type: "post",
7      url: "/plan/save-draft",
8      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
9      data: formData,
10      dataType : "json",
11    })
12    // Ajaxリクエストが成功した場合
13    .done(function(data){
14      location.href = '/plan/detail?id=' + params.get('id');
15    })
16    // Ajaxリクエストが失敗した場合
17    .fail(function(XMLHttpRequest, textStatus, errorThrown){
18      alert('下書き保存に失敗しました。');
19    });
20  });
21});
22
23function createDraftForm() {
24  data = {};
25  // thumbnailのフォームデータ格納
26  let thumbnail = document.getElementById('thumbnail');
27  data['thumbnail'] = "";
28  if ($(thumbnail).val() != "") {
29    data['thumbnail'] = $(thumbnail)[0].files[0];
30  }
31
32  // titleのフォームデータ格納
33  let title = document.getElementById('title');
34  data['title'] = "";
35  if ($(title).val() != "") {
36    // XSS対策
37    let escape_title = escapeHTML($(title).val());
38    data['title'] = escapeHTML($(title).val());
39  }
40  return data;
41}

試したこと

Illegal invocationがFormData()で解消された事例があったので
下記をやってみましたが、フォームデータにthumbnailが入りませんでした。(titleのみ送られた)

js
1〜省略
2let fd = new FormData();
3data['thumbnail'] = fd.append('thumbnail', $(thumbnail)[0].files[0]);

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

ここにより詳細な情報を記載してください。

SurferOnWww

2022/08/14 02:07

> jsでチェック処理後にフォームデータを生成し、ajaxを実行したいのでフォームタグを使用していない。何が分からないのでしょうか？　jsでチェック？　フォームデータを生成？　ajaxを実行？　それらすべて？「フォームタグを使用していない」というのはどういうことですか？ FormData オブジェクトを利用するなら必要では？

jem32o_

2022/08/14 02:32

>何が分からないのでしょうか？配列:dataに$(thumbnail)[0].files[0]を入れるとスクショのエラーが出ており、試したことに記載した方法で FormData オブジェクトを利用してFormData.append('thumbnail', $(thumbnail)[0].files[0])したものを入れたらdata['thumbnail']に格納できず、ajaxのdataにはtitleのみ入っています。 dataはチェック処理で整形したデータをいれてからajaxのdataに入れています。どうすれば$(thumbnail)[0].files[0]をdataに入れてajaxを実行することができるのでしょうか？

SurferOnWww

2022/08/14 02:46

jsでチェックはできていて質問ではないと理解して・・・ <form method="post" enctype="multipart/form-data" ... のような form タグを追加し、その中に <input type="file" name="thumbnail" ... を置いて、ユーザーがアップロードするファイルを選択したら formData オブジェクトを var fd = new FormData(document.querySelector("form")); というようなコードで取得し、jQuery ajax のオプションに data: fd というように設定して送信したらどうなりますか？なお、その際 processData: false (jQuery にデータを処理させない)、contentType: false (contentType を設定させない) としてください。

jem32o_

2022/08/14 13:03

下記にして実行しましたが、デベロッパーツールのネットワークのフォームデータは下記でした。 _token: pIATRx0n7zD90otJtIn2CERqQBHhTDGynyBN9LN3 thumbnail: （バイナリ） ```html <form method="post" enctype="multipart/form-data"> @csrf <label> <div class="thumbnail"> <div class="delete_spot_photo delete_photo"><span>×</span></div> <img class="thumbnail-img"> <span class="photo">写真追加</span> </div> <input type="file" name="thumbnail" id="thumbnail" hidden accept=".png, .jpeg, .jpg"> </label> </form> ``` ```js $('#spot_draft_btn').click(function(){ var fd = new FormData(document.querySelector("form")); $.ajax({ type: "post", url: "/plan/save-draft", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: fd, dataType : "json", processData: false, contentType: false }) // Ajaxリクエストが成功した場合 .done(function(data){ location.href = '/plan/detail?id=' + params.get('id'); }) // Ajaxリクエストが失敗した場合 .fail(function(XMLHttpRequest, textStatus, errorThrown){ alert('下書き保存に失敗しました。'); }); }); ```

回答2件

自己解決

data = {};ではなくdata = new FormData();にしてdata.append('thumbnail', $(thumbnail)[0].files[0]);にすることで、解決しました。
thumbnailだけdata.appendではなく全部をFormData.appendにする必要がありました

投稿2022/08/14 13:22

jem32o_

総合スコア79

回答へのコメント

SurferOnWww

2022/08/14 22:45 編集

> data.append('thumbnail', $(thumbnail)[0].files[0]);にする form タグを使わないでそうする理由を教えていただけませんか？

jem32o_

2022/08/18 15:23

私が作っているサイトで<input type="file"を複数使い、他の要素の値もformデータに使用するので、<input type="file"を複数のformタグで囲うよりもdata = new FormData();を生成してチェック処理した後の値をdata.appendした方が綺麗だと思ったからです。 <input type="file"が単数ならformタグでも問題ないと思います。

上の質問に対するコメントで、

jsでチェックはできていて質問ではないと理解して・・・

<form method="post" enctype="multipart/form-data" ...

のような form タグを追加し、その中に

<input type="file" name="thumbnail" ...

を置いて、ユーザーがアップロードするファイルを選択したら formData オブジェクトを

var fd = new FormData(document.querySelector("form"));

というようなコードで取得し、jQuery ajax のオプションに data: fd というように設定して送信したらどうなりますか？

なお、その際 processData: false (jQuery にデータを処理させない)、contentType: false (contentType を設定させない) としてください。

・・・と書いた件、コードと画像入りでもう少し詳しく書いておきます。

上に述べたコードは以下のようになります。［Ajax Upload］ボタンクリックで JavaScript メソッドを起動し、input type="file" でユーザーが選択した画像ファイル、隠しフィールド __RequestVerificationToken の value、fd.append("CustomField", "This is some extra data"); で追加したデータを jQuery ajax で送信します。

<form method="post" enctype="multipart/form-data" action="/fileupload">
    <input type="file" name="postedfile" />

    <input name="__RequestVerificationToken" type="hidden" 
        value="CfDJ8F1jEm9s7UFHt1yr_lcp1hBWwwpNW400dD9JLD21ltOyzp7cLLIyhZ2nCc4nzU0L-3SAKM2keU9CkuKWhYLPjoUEPB2GCAeuCgzkiEN_lkmg_72w2uzhpu-LivGOFPwApA-v912Sc8kvPoDubU3ALTA" /></
</form>

<input type="button" id="ajaxUpload" value="Ajax Upload" />

<script type="text/javascript">
    //<![CDATA[
    $(function () {
      $('#ajaxUpload').on('click', function (e) {
        // FormData オブジェクトの利用
        var fd = new FormData(document.querySelector("form"));

        // 追加データを以下のようにして送信できる。フォーム
        // データの一番最後に追加されて送信される
        fd.append("CustomField", "This is some extra data");

        $.ajax({
          url: '/fileupload',
          method: 'post',
          data: fd,
          processData: false, // jQuery にデータを処理させない
          contentType: false  // contentType を設定させない
          }).done(function(response) {
            // 省略
          }).fail(function( jqXHR, textStatus, errorThrown ) {
            // 省略
          });
      });
    });
    //]]>
</script>

Fiddler を使って要求・応答をキャプチャして、その要求内容（要求ヘッダとフォームデータ）を見たのが以下の画像です。input type="file" でユーザーが選択した画像ファイル、隠しフィールド __RequestVerificationToken の value、fd.append("CustomField", "This is some extra data"); で追加したデータが multipart/form-data 形式で送信されています。

イメージ説明