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

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

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

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

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

890閲覧

jQueryを使ってフォームの入力欄を増やしたい。

toyop

総合スコア30

PHP

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

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/05/19 18:43

編集2020/05/19 18:53

こんにちは。コロナウィルスの影響で学校が休みになってしまったので、PHPを学ぶことにした大学生です。
自分でコードを組んでみたのですが、表題の件でつまずいてしまいました。よかったらアドバイスいただけると嬉しいです。

  1. 番号リスト画像とテキストをフォーム(bbs.php)から入力してもらう。
  2. 番号リスト画像の拡張子とテキストの入力をphp側(write.php)で確認して、フォルダに画像をアップロードする。
  3. 番号リストアップロードした画像を縮小する。
  4. 番号リスト縮小した画像のパスとテキストをデータベース(MySQL)に保存する。
  5. 番号リストデータベースから画像とテキストを表示する。

1番でフォームのテキスト&画像入力欄を、jQueryを使ってユーザーが増やせるようにしたいのですが、以下のエラーが出てしまいます。

  • Notice: getimagesize(): read of 8192 bytes failed with errno=21 Is a directory in /Applications/MAMP/htdocs/xxx/write.php on line 18
  • Notice: getimagesize(): Read error! in /Applications/MAMP/htdocs/xxx/write.php on line 18
  • Notice: Trying to access array offset on value of type bool in /Applications/MAMP/htdocs/xxx/write.php on line 20

自分でもいろいろ調べてみたのですが、解決策が見つからず質問させていただくことにしました。以下が実際のコードになります。

php

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

php

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

もし解決策などご存知の方がいらっしゃいましたら、ご教示いただけると嬉しいです。
よろしくお願いいたします。


使用環境
PHP/7.4.4


参考にしたサイト
追加ボタンで画像フォームを増やしていく(データベース挿入・表示) - WEB製作のSumiDai.NET
フォーム入力項目を動的に追加・削除【jquery】 - 診断ネット

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

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

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

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

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

guest

回答2

0

まず、name="image"では配列として送信しません。

js

1var namecode = clonecode.find('input.namae').attr('name'); 2// namecode に入っている値は「text[0]」で、何と置換するんだろう。 3namecode = namecode.replace(/input[[0-9]{1,2}/g,'input[' + cloneno2); 4// ここで「namecode」の値を確認してみましょう。

【簡単なブラウザの開発者ツールの説明(Chrome)】
https://qiita.com/takihiyoshi/items/95c9bde8b7b8bda86ce1

【ChromeのデベロッパーツールでJSをデバッグする方法(2019年版) - ICS MEDIA】
https://ics.media/entry/190517/

【忘れてしまうPHPのデバッグ方法 - Qiita】
https://qiita.com/daaaayoshi/items/72011cd2eb69743a077a

投稿2020/05/19 19:02

kei344

総合スコア69407

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

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

0

コードをそこまで見ていませんが、JavaScriptのエラーではなく、PHPのエラーのようです。

そのエラー文を見ていきます。read errorが多く見受けられます。
Windowsと違って、macOSの場合はパーミッション(権限)の注意が一層に必要と記憶しています。

一度該当の画像ファイルのパーミッションを確認されてはいかがでしょうか?

投稿2020/05/19 19:07

編集2020/05/19 19:08
kyoya0819

総合スコア10429

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問