Q&A
「idにあたるもの」は具体的に何の情報でしょうか。
##わからないこと
いつもお世話になっております。
この度ファイルデータをajaxを使って飛ばそうとしています。
ファイルのほうは問題なく取得できているのですが、それに追加でappendでidにあたるものを飛ばそうとしています。しかしそのappendができておりません。
コードは下記になります。
var $fileList = $('#file_list'); $fileList //画像がアップロードされた時の処理 .on('change.inputFile', '.input_file', function(e){ //画像が3つになった場合にinputタグを非表示にする処理 //上にも同じコードがあるのでまとめた方がいいのですが... var $fileListLI = $('#file_list li label input[name=img_file]'); var inputFileNum = $fileListLI.length; var lastInputFile = $fileListLI.eq(-1); if (inputFileNum == 4){ $(lastInputFile).hide(); } //Ajaxで飛ばすdata（FromDataオブジェクト）を生成する処理 var fd = new FormData($('#cv_form').get(0)); //最後から2番目のinputタグを拾う処理 //画像が選択されるinputタグは必ず最後から2番目 var targetFile = $fileListLI.eq(-2); //1画像毎のUPなので[0]、複数である場合は[1][2]... fd.append("file", $(targetFile).prop("files")); $.ajax({ url: "{{action('PortalController@spimgupload')}}", type: 'post', dataType: 'html', data: fd, processData: false, contentType: false }) // 失敗時 .fail(function(jqXHR, statusText, errorThrown){ console.log(jqXHR); alert('エラー発生'); }) // 成功時 .done(function(data, textStatus, jqXHR){ // successImgUpload(); console.log(data); var imgUrl = '{!!storage_path("app/public/cv/")!!}'; if(textStatus == 'success') { alert('succccccceeeeeeessssss!!'); return true; } else { alert(data); return false; } alert('成功したよ'); }); var $input = $(this), $li = $input.closest('.each_file'), $newLi = $li; $fileList.append($newLi); //サムネイル画像を表示する処理 var file = e.target.files[0], fileName = file.name; //FileReaderオブジェクトの生成 reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function(){ var fileReader = this; if(fileReader.result){ var thumb = '<div class="thumbnail"><a href="' + fileReader.result + '" class="swipebox"><img src="' + fileReader.result + '" width="100px" style="max-width: 100px;"><input type="hidden" name="id" value="{{request()->input('id')}}"><input type="hidden" name="filename" value="' + fileName + '"></a><span class="delete_btn del-button ui-opaimg">削除</span></div>'; $li.append(thumb); } return this; }; $input.hide(); return this; });
<form method="post" action="{{url('multifileUpload')}}" enctype="multipart/form-data" id="cv_form"> <ul id="file_list"> <li class="each_file"> <label class="bt-photo02 ui-bt-nomal ui-opaimg">添付する <input type="file" id="uploadName" class="input_file" name="img_file[]" value="アップロード" accept="image/*;capture=camera" style="display:none;"> <input type="hidden" name="id" value="{{request()->input('id')}}"> </label> </li> </ul> <!-- <input type="submit" value="画像アップロード"> --> <p><button type="submit" id="submit_btn">送付する</button></p> </form>
ご教授いただければ幸いです。
よろしくお願いいたします。
数値でございます
どこの要素の何の数値かがわかりません。
コード中にappendが三か所出現していますが、どれのことを言っていますか？
回答2件
0
FormDataの考え方
HTML
1<form> 2<input type="text" name="t1" value="123"> 3<input type="text" name="t2" value="456" disabled> 4<input type="hidden" name="h1" value="789"> 5<select name="s1"> 6<option value="1">1</option> 7<option value="2" selected>2</option> 8<option value="3">3</option> 9</select> 10<input type="checkbox" name="c1[]" value="1" checked> 11<input type="checkbox" name="c1[]" value="2" > 12<input type="checkbox" name="c1[]" value="3" checked> 13<input type="radio" name="r1" value="1" checked> 14<input type="radio" name="r1" value="2"> 15<input type="radio" name="r1" value="3"> 16<button type="button">submit</button> 17<textarea name="ta1">ta</textarea> 18</form> 19 20
のようなフォームに対して、以下のように値を得ます
javascript
1$(function () { 2 $("button").on('click', function (e) { 3 var fd=new FormData($(this).prop('form')); 4 for(var item of fd){ 5 console.log(item); 6 } 7 e.preventDefault(); //submitを殺す 8 }); 9}); 10
ただしfor~ofはIEが対応していないため、汎用的に処理するなら
フォームのエレメンツを走査する必要があります
調整版
$(function () { $("button").on('click', function (e) { var f=$(this).prop('form').elements; var n=[]; for(i=0;i<f.length;i++){ if(f.item(i).name && !f.item(i).disabled){ var ty=f.item(i).type; if((ty=="radio" || ty=="checkbox") && f.item(i).checked || ty=="text" || ty=="hidden" || ty=="textarea" || ty=="select-one" ){ n.push([f.item(i).name,f.item(i).value]); } } } console.log(n); e.preventDefault(); }); });
投稿2018/01/23 07:27
編集2018/01/23 09:02
総合スコア116895
formdataはアクティブなデータのみつかむのに対して
formを走査する場合はselectやradio、checkboxの値は
selectedやcheckedを参照しながらかつdisabledではないことを
確認してアクティブかどうかをチェックする必要があります
(調整版アップデートしておきました)
ご回答ありがとうございます。
FormDataについてわかりやすく説明してくださり、誠にありがとうございます。
0
ベストアンサー
回答に誤った情報を記載してしまったため、取り消し線を入れて後ろにコメントした部分を追記しました。
ざっと見た感じでしかないので外してたら申し訳ないのですが、
var fd = new FormData($('#cv_form').get(0));
これだけだと「#cv_formの一番最初の入力コントロール」のみ取得しています。
hiddenに設定しているname="id"も一緒に送りたい場合、.append()で追加してあげる必要があるのではないでしょうか。
javascript
1fd.append("id",$("#id").val()); //hiddenにもidを設定した前提なので書き方はあわせてください
※もっと効率的なやり方はありそうですが、ひとまず。
下記も参考にしてみてください。
回答を一部修正
～.get(0)でform内容は取得可能です。
console.logでformdataを確認するためには以下のように書く必要があります。
console.log(fd.get('body'));
※詳しくは下記記事のコメントへ。
入力コントロールの情報取得はコメントに書いたとおりです。
idを設定してval()で取得するのが記述が少なくすみます（checkboxやradioなどはつけ方やとり方が違うケースがあるので下記を参考にしてください）
投稿2018/01/23 06:34
編集2018/01/23 08:27
総合スコア80875
ご回答ありがとうございます。
ただ、
var fdの直下に
fd.append("id", "88");
と追加しても、console.logではその値を確認することができませんでした。
↓「javascriptのFormDataは、ajaxで飛ばすまで中身を見ることができないっぽい。」らしいですよ。
https://qiita.com/Kohei_Kishimoto0214/items/5ac3ca643da8d636ce40
やはり情報を飛ばした先のurlで確認するのが確実ですね。
確認できました！
ありがとうございます。
追加で確認させていただきたいのですが、ajaxで飛ばす前にそのidをjquery側で用いることは可能でしょうか？
「ajaxで飛ばす前にそのidをjquery側で用いる」というのがどの範囲でどう利用したいのか教えてください。
同じclick function内で用いることを目標としています
ご提示ソースにはclickイベントはどこにも記述されていませんよ。
change.inputFile の中というのであれば、
hidden要素にidを与えておき
<input type="hidden" name="id" id="id" value="{{request()->input('id')}}">
javascript側でvalueを取得するような記述を書くのが記述量は少ないですね。
var id = $("#id").val();
参考：
https://itsakura.com/jquery-hidden
内容を汲んでくださりありがとうございます。
私が求めていたものと一致しました
解決したようで何よりです。
new FormData(HTMLFormElement)でそのフォームのフォームコントロールはすべて送信されるはずですが、一番最初の入力コントロールというのは何を指していますか？
すみません。よくよく考えたらその通りですね。
勘違いしていました。
コメントで解決に至れたようなので回答修正しておきます。
x_x様
仰る通り、appendがなくてもajax実行後で確認することができました。
ご回答、ご指摘ありがとうございます。
もう一つ。そのQiitaのコメントでも指摘されていますが、Ajax送信の有無は関係ありません。最後まで読むことをお勧めします。
ありがとうございます。記事確認が疎かになっておりました。
ご指摘の箇所を確認し、回答修正しました。
ご修正ありがとうございます。
参考になる資料を多数いただけて助かります
あなたの回答
tips
プレビュー
