質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1748閲覧

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

toyop

総合スコア30

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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 //数字を+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ではそのままでは受け取れないなどの記述を見つけたのですが、いまいちわかりませんでした。
解決策をご存知の方がいらっしゃいましたら、どこを直したらいいというのを具体的に教えていただきたいです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/07/05 16:21

phpは、それで全文ではないですよね? エラーで20行目ってでてるのに、20行ないですし。 全文記載できませんか?
toyop

2020/07/06 01:52

コメントありがとうございます。 全文載せると長くなるので必要そうなところだけ載せたのですが、全文記載させていただきます。 よろしくお願いいたします。
guest

回答1

0

なんか全体的におかしいです

<input type="text" name="text[0]" class="namae">

nameの配列形式不要にみえます

<input type="file" name="image" class="shasin">

multipleにファイルをおくらないなら$_FILESの指定がおかしいです

<input type="submit[]" value="アップロード">

typeがおかしいです

投稿2020/07/06 04:38

yambejp

総合スコア114994

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問