- ベストアンサー
フォーム追加
ログイン機能をつけた、ユーザー自身がアップロードするサイトを作っています。 このようなフォームをボタンで追加したり削除したりするには普通、jsを使うと思いますが、phpのクラス class form のようにして画像のようにフォームを増減させることはできますか？ もしできる場合、簡単なロジック（方針）を教えて下さい。 なお、フォームには 1.アップロードするファイルのタイトル 2.ファイルの説明 3.ファイル（アップロードするファイル名は私自身で、アップロード者、日付等をディレクトリやファイル名にして、セキュリティに配慮しています。） の3つを入れたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<?php /** * 画像が添付されていなかったので自分ならこうするかな、ということを勘で記述します。 * Formの増減をPHPで実行しようとすると、毎回フォームを送信しなければならないので * 増減部分はJavascriptで書いて、POSTされたものをPHPで操作する、というのが素直かなと思います。 * * ※ POSTされたものにエラーがあった場合（バリデーション処理ではじいた場合）に、どうするかについては * それはそれでやり方はいろいろ考える必要があるので今回は考えません。 */ var_dump($_FILES); var_dump($_POST); ?><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form id="frm" action="" method="POST" enctype="multipart/form-data"> <div id="file-container"> </div> <input id="add-file-input" type="button" value="追加"> <input id="send-form" type="submit" name="send" value="ファイルを登録する"> </form> <script> /** * とりあえずフォームを増減させるための記述 */ const FileInput = function () { // 増減する一連のINPUTタグの格納場所 const container = document.querySelector('#file-container') // 別名で管理する必要があるのでINDEX番号で管理する let number = 0 /** * タイトル、説明、ファイルアップロードINPUTの塊を作るプライベートメソッド */ const createInputs = function () { const i = number number = number + 1 // 子コンテナのDIVタグを作る const inputContainer = document.createElement('div') // あとでデザインしやすいようにクラス名を設定しておく inputContainer.className = 'input-container' // 子コンテナの中身を文字列で設定しておく（テンプレートリテラルで作ると楽） inputContainer.innerHTML = ` title: <input type="text" name="title[${i}]"><br> description: <textarea name="desc[${i}]"></textarea><br> file: <input type="file" name="file[${i}]"><br> <input type="button" class="delete-button" value="削除"> ` // コンテナの中の「削除ボタン」に自分自身を削除するアクションを登録する inputContainer.querySelector('.delete-button').addEventListener('click', function () { container.removeChild(inputContainer) }) // 外側のコンテナに当該メソッドで作った子コンテナを登録する container.appendChild(inputContainer) } return { // 外側でcreateInputsを「add」という名称で使うためにhashを返す add: createInputs } } // インスタンス作成 const file = FileInput() // 「追加」ボタンを押下されるたびにフォームが追加されるようアクションを登録する document.querySelector('#add-file-input').addEventListener('click', file.add) </script> </body> </html>
お礼
ありがとうございます