ラボ > HTML:form関連、雑学

Form投稿とファイルのアップについて

問合せや情報登録などのフォームにファイルのアップを組み合わせたい・・・

作成日:2018-07-06, 更新日:2022-02-08

基本

・出来る限りラクな処理

基本的な投稿フォームの流れ

1.表示:入力フォーム画面
2.処理:バリデーションチェック
3.表示:確認画面
4.処理:バリデーションチェック
5.処理:保存、メール送信等
6.表示:結果画面

・「2.処理:バリデーションチェック」は「1.表示:入力フォーム画面」でリアルタイムで対応することもある。
・「3.表示:確認画面」は省くこともある。
・「4.処理:バリデーションチェック」は最終チェックだから省かない方がいいと思う。
・「5.処理:保存、メール送信等」はDB保存だけだったり、メール送信だけだったりと状況によって異なる
・「6.表示:結果画面」は省くこともある。

ファイルのアップを絡めたい

ひとまず上記のフォームをベースに考える。

タイプA:ファイルのupは最後にする

▼基本
1.表示:入力フォーム画面+ファイルの投稿フォーム
2.処理:バリデーションチェック(jsやajax等)
3.表示:確認画面+ファイル名やプレビュー画像(※ページ遷移NG。「1」をreadonlyにしたりする)
4.処理:バリデーションチェック
5.処理:保存、メール送信等+ファイル保存
6.表示:結果画面

テキスト類はセッションに持たせることが出来るけどファイルは無理っぽい。
そのため「3」はページ遷移させない。

タイプB:ひとまずアップして、後で移動

▼基本
1.表示:入力フォーム画面+ファイルの投稿フォーム
2.処理:バリデーションチェック+ファイルを一時保存
3.表示:確認画面+ファイル名やプレビュー画像
4.処理:バリデーションチェック
5.処理:保存、メール送信等+一時保存したファイルの処理(移動、削除等)
6.表示:結果画面
※「4」や「5」でエラーになった、「3」で離脱された・・・など一時保存したファイルの後始末が出来なかった場合の対応

▼cron等
・一時保存したファイルの定期的な削除
※cronの設定が面倒なら「2」のときに「古くなった一時保存したファイル」を削除させるようにする。

▼その他
・一時保存する際のPATHに対して制限が必要かもしれない
※プログラムからのアクセスのみ許可 or IP制限等。

タイプC:ファイルのアップを別処理

Wordpressのようにファイルアップと投稿フォームを完全に別にする。

▼基本フォーム1(変更なし)
1.表示:入力フォーム画面
2.処理:バリデーションチェック
3.表示:確認画面
4.処理:バリデーションチェック
5.処理:保存、メール送信等
6.表示:結果画面

▼基本フォーム2(新たにページを用意)
1.ファイルのアップ

▼悩ましい内容
・ファイルに対するコメントや付加情報を追加したいとき
・「基本フォーム1」と「基本フォーム2」でアップしたファイルの紐づけ
・ユーザビリティ(1画面で収まらないのでデザインやページ遷移を考慮する必要アリ)

関連項目