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

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

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

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

JavaScript

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

jQuery

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

Q&A

解決済

2回答

478閲覧

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

jem32o

総合スコア79

Laravel

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

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2022/08/14 01:45

編集2022/08/14 02:28

前提

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/ツールのバージョンなど)

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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を実行することができるのでしょうか?
退会済みユーザー

退会済みユーザー

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

回答2

0

自己解決

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

投稿2022/08/14 13:22

jem32o

総合スコア79

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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タグでも問題ないと思います。
guest

0

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

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 形式で送信されています。

イメージ説明

これで受信側の Web サーバーでは問題なく処理できるはずです。できなかったらアプリの作り方が悪いということになります。

投稿2022/08/14 03:59

編集2022/08/14 04:05
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問