• ベストアンサー

フォーム追加

ログイン機能をつけた、ユーザー自身がアップロードするサイトを作っています。 このようなフォームをボタンで追加したり削除したりするには普通、jsを使うと思いますが、phpのクラス class form のようにして画像のようにフォームを増減させることはできますか? もしできる場合、簡単なロジック(方針)を教えて下さい。 なお、フォームには 1.アップロードするファイルのタイトル 2.ファイルの説明 3.ファイル(アップロードするファイル名は私自身で、アップロード者、日付等をディレクトリやファイル名にして、セキュリティに配慮しています。) の3つを入れたいです。

  • PHP
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.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>

dhtfyjh
質問者

お礼

ありがとうございます

関連するQ&A

  • フォームの呼び出し

     以下のようなフォームがあります。(点線で囲んだ間)  この内容を .CSS や .js のように別ファイルとして  HTMLファイルから呼び出す場合の、HTML タグの記述方法 を教えていただけませんでしょうか。 ------------------------------------------------------------ <form method="get" action="URL">  途中省略 </form> ------------------------------------------------------------

  • フォームプログラムでのファイル分割

    先日よりお世話になっています。VC++フォームプログラムのスコープに関する質問です。 フォームプログラムではデザイナモードでGUIで作成したデザインや割り込み、プロパティなどが、自動的にソースとして全てForm1.hに作成されます。さらに自分で処理を追加していくわけですが、Form1.hが膨大になってしまうこともあり、デザインに関する部分以外を別のファイルanother.cppで書きたいのですがうまくいきません。どうか知恵をお貸しください。 まず、現在のForm1.hの構成は、 --Form1.h----------------------------------------------------- namespace namForm1{ class Form1{ private: void func(); //プロトタイプ ・・・・・・・・ } ・・・・・ } void namForm1::Form1::func(){・・・} //関数定義 --------------------------------------------------------------- のようになっており、ここでフォームプログラムの処理が全て記載され、実質のメインともいえるような作りになっています。 ですが、Form1.hのコード量が増えて見辛くなることを嫌って、Form1.hで書いてある関数func()などを内容をanother.cppに出したいのです。another.cppからnamForm1の名前空間を使おうとしても、当然「識別子がクラス名でも名前空間名でもありません。」怒られますし、another.cppにForm1.hをインクルードしてもやはり、「識別子がクラス名でも名前空間名でもありません。」となります。このプログラムをスマートにファイル分割する方法を教えてください。お願いします。

  • フォームからアップロードされた画像ファイルの処理

    フォームからアップロードされてきた画像ファイルを、適当なファイル名を付けてJPGあるいはGIFの拡張子で保存し、HTMLファイルで保存した画像を一覧表示させようというCGIスクリプトを作りたいと考えています。 質問1 <FORM action="xxxx.cgi" method="post" enctype="multipart/form-data"> <INPUT type="file" name="gazo"> <INPUT type="submit"> </FORM> とこんな具合のフォームから画像ファイル(JPGやGIF)をアップロードした時、 受け手のxxxx.cgiでは、この画像ファイルのデータをどのように受けたらよいのでしょうか? read(STDIN,$_,$ENV{'CONTENT_LENGTH'});としたり、 あるいは cgi-lib.plを読み込んで、$in{'gazo'} というような形で画像ファイルのデータを受け取ればよいのでしょうか? 質問2 画像ファイルを受け取ったとして、フォームから送られてきた画像ファイルがJPGなのかGIFなのかを判別することは可能でしょうか? 可能ならば、判別するためのスクリプトはどんなものが考えられるでしょうか? (フォームから送られてくる画像ファイルのデータの何をチェックすれば、JPGかGIFかを判別できるのでしょうか?) もしご回答頂ける方がおられればご教授ください。よろしくお願いします。 なお、「既存のスクリプトを利用しなさい」というような回答やアドバイスならば不要でございます。

    • ベストアンサー
    • Perl
  • フォームを閉じる方法

    VB2005 Expressにて開発を行っております。 ログインフォーム、メニューフォーム、各フォームと複数フォームを使用 するアプリを作成中です。 そこで質問させて下さい。呼び出し元フォームを閉じてから呼び出し先 フォームを開くとするにはどのように行ったらいいのでしょうか。 下記が作成中のPGMですが、「Form1からForm2を表示」「Form2からForm1を表示」は正常に動作しますが、再度「Form1からForm2を表示」を行うと 破棄されたオブジェクトにアクセスできません。 オブジェクト名 'Form2' です。 が表示されて「f2.Show()」でエラーになってしまいます。 どなたかご存知の方がいらっしゃいましたらご教授下さい。 よろしくお願いします。 '標準モジュールで下記を宣言 Public f1 As New Form1 'ログイン画面 Public f2 As New Form2 'メニュー画面 Public f3 As New Form3 'メニュー1 Public f4 As New Form4 'メニュー2 'Form1からForm2を表示 F_Form2.StartPosition = FormStartPosition.CenterScreen F_Form2.Show() Me.Close() 'Form2を閉じてForm1を表示 F_Form1.StartPosition = FormStartPosition.CenterScreen F_Form1.Show() Me.Close()

  • input type="file"を使わずにファイルをアップロードする方法

    Formで fileの入力フォームを使用せずに、ファイルをアップロード する方法を探しています。 要は、特定のローカルディレクトリの中のファイルを一括して転送したい のですが、input type="file" を使わずに行えるようにしたいのです。 使っている環境はPHP5?です。 何卒宜しくお願いいたします。

    • 締切済み
    • PHP
  • CGIのフォームをアップロードするときのやり方

    『』内は下記のサイトの一部を抜粋したのですが、ホームページでCGIのフォームを使用するときの【ディレクトリ構成例のアップロード】とはどのようにすればいいのかわかりません。私はジオプラスを利用しているのですが、具体的に、アップロードするときにどのようにすればいいのでしょうか? 「postmailというディレクトリを作成」の段階から意味がわからないのですが、アップロード名を変更するということなんでしょうか? 拙文で申し訳ないですが、ぜひご回答のほどよろしくお願いします。 『以上で掲示板が動くだけの最低限の設定が完了しましたので、ホームページスペースにアップロードしてみます。 ページなどは通常アップロードすれば見えますが、CGI の場合はアクセス権限の設定や、この CGI の場合は画像を保存するディレクトリの作成なども必要となりますので順に説明していき、ここではFTPツール自体の操作方法については割合させて頂きます。 KENT-WEB さんで指示されているディレクトリ構成例は以下の通りです。 色が付いているものは、それ以降の説明の色と対応しています。 【ディレクトリ構成例】 public_html / index.html (トップページ等)   |   +-- postmail / postmail.cgi [755]             jcode.pl            postmail.html            tmp_conf.html            tmp_err1.html            tmp_err2.html            tmp_thx.html これは アップロードするディレクトリに postmail というディレクトリを作成し、その中にアップロードする場合の例で、同じように行う場合は次のような手順で行い、特に表記が無い場合、転送モードはテキストモードで行います。 1. FTP ツールで接続し、postmail というディレクトリを作成する 2. 作成した postmail というディレクトリの中に全てのファイルをアップロードする 3. 上記でアップロードしたファイルのアクセス権限を、【ディレクトリ構成例】で記載されているものにする。 postmail.cgiは 755に、その他は 644となっていれば修正の必要はありません。』 http://www.aimix.jp/cgi/postmail.html

  • 画面遷移しないで画像の追加を行うには?

    現在htmlのformで画像をアップロードしPHPで受け取ってhtmlのテーブルの中で表示するプログラムを作っています。 ここにjavascriptを追加してテーブル表示の際に非同期で行いたいと考えています。 フォームの下にテーブルがありアップロード完了と同時に画面遷移せずに画像が追加されるという具合です。 prototype.jsを使えばできそうという所までたどり着きましたがなかなかうまくいきません。どなたかお力を貸していただけないでしょうか。 またテーブルに画像が追加されたときにもそのタイミングで自動的に更新したいです。

    • ベストアンサー
    • AJAX
  • こんなフォームメールCGIありませんか

    下記のようなフォームメールCGIを探しています。 フォームの入力項目名、項目数が自由にいくつでも作れる ファイル添付(アップロード)ができる フォームごとに転送先メールアドレスが設定できる 転送メールにファイル添付ができる

    • 締切済み
    • CGI
  • ファイルアップ時のファイル名

    PHPで画像をアップロードしようとしています。 ファイル名を「000000_999999.jpg」というような感じにしたいです。 ファイル名の000000の部分は日付(080221等)が入ります。 999999の部分をどうしたら良いのか分かりません。 同時に5ファイルまでアップロードできるようなフォームになっています。 この場合で、絶対ダブらないようにするにはどのような値を使えば良いのでしょうか? 出来れば関数名も入れていただけると嬉しいです。 お願いいたします。

    • ベストアンサー
    • PHP
  • HTMLでフォームを作ってPHPで受け取ることができません。

    プログラミング超初心者です。本でPHPを勉強中です。HTMLでフォームを作成しPHPでフォームに入力された内容を受け取るというところでつまづいてます。本に紹介されているサンプルスクリプトをローカルホストでブラウザで試しているのですがうまくいきません。 フォーム内に入力しSUBMITのボタンを押してもPHPの方のページが表示されません。2つのファイル名はform.html と form.php 名のですが、ブラウザのアドレスバーが http://localhost/form.html から http://localhost/form.html/form.php に替わりHTMLが再表示されるだけです。 環境は os windows XP SP1 ブラウザ IE6 php 4.2.2 です。 スプリクト載せると800字超えてしまいますので回答に載せます。 お解りになる方いらっしゃいましたらよろしくお願いいたします。

    • 締切済み
    • PHP

専門家に質問してみよう