
前提
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。



回答2件
あなたの回答
tips
プレビュー