質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

jem32o
jem32o_

総合スコア43

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0評価

1クリップ

221閲覧

投稿2022/08/14 01:45

編集2022/08/19 00:23

前提

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

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

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

実現したいこと

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

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

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

該当のソースコード

html

<div class="plan_edit_contents">  <div class="thumbnail-content">   <label class="label" style="display: block;">{{ config('plan.message.thumbnail') }}</label>    <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>   </div>   <div class="title-contents">    <label for="title" class="label">タイトル</label>    <input type="text" name="title" id="title" maxlength="100">    <span class="error_title error"></span>   </div> </div>

js

$(function(){ $('#spot_draft_btn').click(function(){ // バリデーションチェック let formData = createDraftForm(); $.ajax({ type: "post", url: "/plan/save-draft", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: formData, dataType : "json", }) // Ajaxリクエストが成功した場合 .done(function(data){ location.href = '/plan/detail?id=' + params.get('id'); }) // Ajaxリクエストが失敗した場合 .fail(function(XMLHttpRequest, textStatus, errorThrown){ alert('下書き保存に失敗しました。'); }); }); }); function createDraftForm() { data = {}; // thumbnailのフォームデータ格納 let thumbnail = document.getElementById('thumbnail'); data['thumbnail'] = ""; if ($(thumbnail).val() != "") { data['thumbnail'] = $(thumbnail)[0].files[0]; } // titleのフォームデータ格納 let title = document.getElementById('title'); data['title'] = ""; if ($(title).val() != "") { // XSS対策 let escape_title = escapeHTML($(title).val()); data['title'] = escapeHTML($(title).val()); } return data; }

試したこと

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

js

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

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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('下書き保存に失敗しました。'); }); }); ```

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。