JavaScriptのcloneを使って動的にフォームの追加・削除を行い、データを送信したい。

toyop

総合スコア30

0グッド

0クリップ

投稿2020/07/05 16:15

編集2020/07/06 01:56

こんにちは。
JavaScriptでわからない部分があり、質問させてください。
フォームを動的に追加・削除するのは、以下のページを参考にして実現できたのですが、
・追加ボタンで画像フォームを増やしていく(データベース挿入・表示) - WEB製作のSumiDai.NET
データの受け渡しでつまずいてしまいました。

上記のホームページを参考に書いたコード

php
1<html>
2<head>
3  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
4  <title>画像アップロード</title>
5</head>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7<script type="text/javascript">
8  $(function() {
9	// 追加
10	$('.addformbox').click(function() {
11		// クローンを変数に格納
12		var clonecode = $('.box:last').clone(true);
13		
14		//数字を＋１し変数に格納
15		var cloneno = clonecode.attr('data-formno');
16		var cloneno2 = parseInt(cloneno) + 1;
17		var cloneno3 = parseInt(cloneno) + 2;
18		
19		//data属性の数字を＋１
20		clonecode.attr('data-formno',cloneno2);
21		
22		//数値
23		clonecode.find('.no').html(cloneno3);
24		
25		//name属性の数字を+1
26		var namecode = clonecode.find('input.namae').attr('name');
27		namecode = namecode.replace(/input[[0-9]{1,2}/g,'input[' + cloneno2);
28		clonecode.find('input.namae').attr('name',namecode);
29
30		var namecode2 = clonecode.find('input.shasin').attr('name');
31		namecode2 = namecode2.replace(/textarea[[0-9]{1,2}/g,'input[' + cloneno2);
32		clonecode.find('input.shasin').attr('name',namecode2);
33		
34		//HTMLに追加
35		clonecode.insertAfter($('.box:last'));
36	});
37	
38
39	//削除
40	$('.deletformbox').click(function() {
41		//クリックされた削除ボタンの親要素を削除
42		$(this).parents(".box").remove();
43
44		var scount = 0;
45		//番号振り直し
46		$('.box').each(function(){
47			var scount2 = scount + 1;
48		
49			//data属性の数字
50			$(this).attr('data-formno',scount);
51			
52			$('.no',this).html(scount2);
53			
54			
55			//input質問タイトル番号振り直し
56			var name = $('input.namae',this).attr('name');
57			name = name.replace(/input[[0-9]{1,2}/g,'input[' + scount);
58			$('input.namae',this).attr('name',name);
59	
60			var name2 = $('input.shasin',this).attr('name');
61			name2 = name2.replace(/input[[0-9]{1,2}/g,'input[' + scount);
62			$('input.shasin',this).attr('name',name2);
63
64			scount += 1;
65		});
66	});	
67	
68});
69</script>
70<body>
71  <h1>画像アップロード</h1>
72  <form action="write.php" method="post" enctype="multipart/form-data">
73  <div class="box" data-formno="0" style="border:dashed 1px #ccc">
74		<p class="no">1</p>
75		<p>
76		【料理名】<br>
77    <input type="text" name="text[0]" class="namae">
78    </p>
79    <p>
80    【写真】<br>  
81    <input type="file" name="image" class="shasin">
82    </p>
83    <a class="deletformbox">削除</a>
84	</div>
85	<p><a class="addformbox">追加</a></p>
86    <input type="submit[]" value="アップロード">
87  </form>  
88</body>
89</html>

以下のコードでデータを受け取ろうとしたのですが、

Notice: getimagesize(): read of 8192 bytes failed with errno=21 Is a directory in /Applications/MAMP/htdocs/myproject/write.php on line 18

Notice: getimagesize(): Read error! in /Applications/MAMP/htdocs/myproject/write.php on line 18

Notice: Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/myproject/write.php on line 20
pは画像ファイル(JPEG/PNG) ではありません。

というエラーが表示され、うまくいきませんでした。

php
1  <?php
2
3  $array_count = count($_POST['text']);
4
5  //データの受け取り
6  for($i=0; $i<$array_count; $i++)
7  {
8  $text[$i] = $_POST['text'][$i];
9  }
10
11  // MIDDLE_WIDTHの定義
12  define('MIDDLE_WIDTH', 300);
13
14
15  // データの拡張子をチェック
16  for($i=0; $i<$array_count; $i++)
17  {
18  $imagesize[$i] = getimagesize($_FILES['image']['tmp_name'][$i]);
19
20    switch($imagesize[$i]['mime']){
21      case 'image/jpeg':
22        $ext[$i] = '.jpg';
23        break;
24      case 'image/png':
25        $ext[$i] = '.png';
26        break;
27      default:
28        echo $_FILES['image']['name'][$i]."は画像ファイル(JPEG/PNG) ではありません。<br>";
29       $ext[$i] = 0;
30    }
31    // ファイル形式が異なる場合処理を止める
32    if ($ext[$i] === 0) {
33      exit;
34    }
35  }
36  
37  // テキストが入力されていない場合処理を止める
38  for($i=0; $i<$array_count; $i++)
39  {
40  if($_POST['text'][$i] == ''){
41      echo $_POST['text'][$i]."に料理名が入力されていません。<br>";
42      exit;
43  }
44  }
45    // アップロード処理
46    for($i=0; $i<$array_count; $i++)
47    {
48    $imageFileName[$i] = sha1(time().mt_rand()) . $ext[$i];
49    if(isset($_FILES['image'][$i], $_POST['text'][$i]) && is_uploaded_file($_FILES['image']['tmp_name'])){
50      if (!move_uploaded_file($_FILES['image']['tmp_name'][$i], 'album/' . $imageFileName[$i])){
51        echo 'アップロードできませんでした。';
52      }
53    }
54    } 
55
56    $width = $imagesize[$i][0];
57    $height = $imagesize[$i][1];
58    $imageFilePath[$i] = 'album/'. $imageFileName[$i];
59    
60    for($i=0; $i<$array_count; $i++)
61    {
62    // MIDDLE画像を作成、保存
63    if ($width > MIDDLE_WIDTH) {
64    // 元ファイルを画像タイプによって作る
65    switch($imagesize[$i]['mime']){
66    case 'image/gif':
67        $srcImage = imagecreatefromgif($imageFilePath);
68        break;
69    case 'image/jpeg':
70        $srcImage = imagecreatefromjpeg($imageFilePath);
71        break;
72    case 'image/png':
73        $srcImage = imagecreatefrompng($imageFilePath);
74        break;
75    }
76    }
77    }
78    // 新しいサイズを作る
79    $middleHeight[$i] = round($height * MIDDLE_WIDTH / $width);
80  
81    // MIDDLE画像を生成
82    $middleImage[$i] = imagecreatetruecolor(MIDDLE_WIDTH, $middleHeight[$i]);
83    imagecopyresampled($middleImage[$i], $srcImage[$i], 0, 0, 0, 0, 300, $middleHeight[$i], $width, $height);
84    
85    // MIDDLE画像を保存する
86    for($i=0; $i<$array_count; $i++)
87    {
88    switch($imagesize[$i]['mime']){
89      case 'image/gif':
90          imagegif($middleImage[$i], 'album/'.'m'.$imageFileName[$i]);  //fullサイズリネイム
91          break;
92      case 'image/jpeg':
93          imagejpeg($middleImage[$i], 'album/'.'m'.$imageFileName[$i]);
94          break;
95      case 'image/png':
96          imagepng($middleImage[$i], 'album/'.'m'.$imageFileName[$i]);
97          break;
98    }
99    }
100
101    $MiddleimageFilePath[$i] = 'album/'.'m'.$imageFileName[$i];
102  
103    for($i=0; $i<$array_count; $i++)
104    {
105    // オリジナル画像の消去
106    if(file_exists($MiddleimageFilePath[$i])){
107      unlink($imageFilePath[$i]);
108    }
109    }
110    
111  // データベースに接続
112  $user = 'kenta';
113  $pass = 'password'; // userに設定したパスワード
114  
115  try {
116    for($i=0; $i<$array_count; $i++)
117    {
118      $dbh = new PDO('mysql:host=localhost;dbname=myproject;charset=utf8', $user, $pass);
119      $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
120      $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
121      // プリペアドステートメントを作成
122      $sql = "INSERT INTO menu (text, image) VALUES (:text, :image)";
123      $stmt = $dbh->prepare($sql);
124      // パラメータを割り当て
125      $stmt->bindParam(':text', $text[$i], PDO::PARAM_STR);
126      $stmt->bindParam(':image', $MiddleimageFilePath[$i], PDO::PARAM_STR);
127      // クエリの実行
128      $stmt->execute();
129      // view.phpに移動
130      echo "レシピの登録が完了しました。";
131      exit();
132    }
133  } catch(PDOException $e) {
134      echo "エラー発生: " . htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8') . "<br>";
135      die();
136  }
137
138  ?>
139