Q&A
そもそもformタグの位置がおかしくないですか？
前提条件・したいこと
- input[type="text"]のnameは、image_title[title][]とします。
- ファイルを一つずつ選択し、input[type="text"]にタイトルを入力します。
- POSTで、それぞれのinput[type="text"]のタイトルの中身を取得します。
- POSTで、name=image_title[title]の配列を取得されます。
問題点
POSTから取得した配列の中身が一つしか取得できません。
ソース
php
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 9 <!-- <script src="./jquery.uploadThumbs.js"></script> --> 10 <script src="./form_test_edit_img.js"></script> 11 <title>画像読込テスト</title> 12 <?php 13 $image_title = $_POST['image_title']; 14 $image_title1 = $image_title['title']; 15 foreach((array)$image_title1 as $val){ 16 echo $val; 17 } 18 ?> 19</head> 20 21<body> 22 <form action="./form_test.php" method="post" id="test_form"></form> 23 <ul id="files"> 24 <li><input type="text" name="image_title[title][]" class="upload_title" form="test_form" /></li> 25 <li><input type="file" name="images[]" class="file_input" accept="image/*" form="test_form" /></li> 26 </ul> 27 <input type="submit" value="submit" form="test_form"> 28</body> 29 30</html>
javascript
1$(function(){ 2 $(document).on('change','.file_input',function(e){ 3 var file = e.target.files[0]; 4 var self = $(this); 5 var reader = new FileReader(); 6 reader.addEventListener('load',function(){ 7 self.after($('<img>').attr('src',reader.result).css('max-width',100)); 8 }); 9 reader.readAsDataURL(file); 10 $('#files').append($('<li> </li>'),$('<li><input type="text" name="image_title[title][]" class="upload_title" placeholder="画像のタイトルを入力してください" form="test_form"></li>'),$('<li>').append($(this).clone().val(""))); 11 }); 12});
POSTを使ってinput[type="text"]の中の配列を取得するためには、どうすればよろしいでしょうか。
foreachの使い方がよろしくないのでしょうか。
皆様方からご助言を頂ければと存じます。
お手数ですが、宜しくお願い致します。
m.ts10806様。
コメント頂きありがとうございます。
formの位置を修正しました。
これで、試してみましたが、やはり一つしかname=image[title][]の中身を取得することが出来ませんでした。
image_title[title][] の[title]って変数なのか文字列なのか。htmlとしてもjsとしても文法がおかしいとjsは動かないですよねぇ。
m6u様
コメント頂きありがとうございます。
<input type"text" name="image_title[title][]">のname部分は、name="配列名[列の名前][ ]"となっております。
<input type"text" name="image_title[title][]">で入力された文字列を配列として格納しようとしております。
name内は全部文字列なので指定方法に問題はなさそうですが、ひとまず、$image_titleをデバッグで内容確認してください。
m.ts10806様
コメント頂きありがとうございます。
上記プログラムに、
function console_log($data)
{
echo '<script>';
echo 'console.log(' . json_encode($data) . ')';
echo '</script>';
}
を追加して、複数タイトルを入力し$image_titleをデバッグしたところ、下記のような内容となりました。
{title: Array(1)}
title: Array(1)
0: "aiu"
length: 1
__proto__: Array(0)
__proto__: Object
うまく他に入力したものが配列に収まれてないようです。
https://www.php.net/manual/ja/reserved.variables.post.php
とりあえず何がPOSTされてるか見てみなされ
hentaiman様
コメント頂きありがとうございます。
POSTで得た情報が、先ほど私が書いた内容となります。
{title: Array(1)}
title: Array(1)
0: "aiu"
length: 1
__proto__: Array(0)
__proto__: Object
不思議ですね。
試してみましたが、ちゃんと受け取れてるみたいでしたよ。
タイトルを2つ入力(firstとsecond)してみると、firstsecondと表示されました。
また、foreach文の上に var_export($image_title1); を追記してみると、
array ( 0 => 'first', 1 => 'second', )
と表示されました。
jsがエラー吐いてないですよね？ChromeのConsoleなどで確認してみてください。
gpsoft様。FKM様。
コメント頂きありがとうございます。
ページのキャッシュが古かったようです。
なので、ページのキャッシュを削除して新しくページを開いたら無事配列を取得することが出来ました。
回答1件
0
ベストアンサー
どこで詰まっているのかわかりませんが、type=textとtype=fileは
ここでは切り分けて考えたほうがいいでしょう
PHP
1<?PHP 2print_r($_POST); 3?> 4<form method="post" enctype="multipart/form-data"> 5<ul id="files"> 6<li><input type="text" name="image_title[title][]" class="upload_title" value="aiu"></li> 7<li><input type="text" name="image_title[title][]" class="upload_title" value="xxx"></li> 8<li><input type="text" name="image_title[title][]" class="upload_title" value="yyy"></li> 9<li><input type="file" name="images[]" class="file_input" accept="image/*"></li> 10</ul> 11<input type="submit" value="submit"> 12</form>
投稿2021/03/23 12:25
総合スコア116724
yambejp様
ご回答いただきありがとうございます。
ページ内の古いキャッシュをクリアしましたら、無事nameタグの配列を取得することが出来ました。
ソースを作っていただき、ありがとうございます。
あなたの回答
tips
プレビュー
