こんにちは。
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 //数字を+1し変数に格納 15 var cloneno = clonecode.attr('data-formno'); 16 var cloneno2 = parseInt(cloneno) + 1; 17 var cloneno3 = parseInt(cloneno) + 2; 18 19 //data属性の数字を+1 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
JavaScriptは配列で送信していないからphpではそのままでは受け取れないなどの記述を見つけたのですが、いまいちわかりませんでした。
解決策をご存知の方がいらっしゃいましたら、どこを直したらいいというのを具体的に教えていただきたいです。
よろしくお願いいたします。