プログラミング処方箋.２０　HTML＆PHP『問い合わせフォーム』画像編

パソコン音痴から、プログラミング上級者まで納得の内容となっています。

フォームにおける画像の送受信をテーマとしています。

フォームとしてほとんどの構成はできても、画像などのtype="file"だけは作動しなくて悩む人が多いのですよ。

こういう内容こそ、プログラミング処方箋の真骨頂かもしれません。

今回用いたサーバは、FC2です。

前回までのXAMPPサーバのほうでは、今回の内容をコピペしてもエラーになりますのでご注意ください。

そしてFC2はFC2でも、

FC2ホームページのほうはPHPが禁止されているので、

FC2レンタルサーバLiteのほうを、送受信サーバの土台として用いています。

 

話を戻して、

前回のプログラミング処方箋.１９では、フォームの構成をしました。

ほとんどのフォームパーツは揃ったと思います。

ただ、最後にひとつだけ残った、問題パーツがありました。

type-fileです。

 

file（ファイル）を送るためのtypeなのですが、これがなかなか曲者です。

まず前提として、

フォームで送るファイルといえば、画像しかありません。

フォームで送るファイル＝(イコール)、、画像です。

 

今回は、曲者type-fileを、画像送受信らしく作動させて、HTMLからPHPへと送ることで完成とするフォームを作成します。

今回も、HTML、PHP、を中心に、Javascriptも少し加わります。

めまいをしそうになったら、少し休憩して落ち着きましょう。

HTML、PHP、Javascript、と言っても、それらはただのプログラミング種類の名前であり、カエル、ミミズ、ヘビ、と言っているようなものです。

 

file(画像)送受信のフォームが必ずできる

type="file"とは

ファイルを作る
画像収納用
Javascriptのファイル

HTMLとPHP
HTMLでJavascript召喚
しっかりめのPHP

プレビューと受信確認
ちゃんと動いてひと安心

各パーツの役目
複雑になってきたプログラミングの解読

ちょっと与太話
パーミッション？
ディレクトリ？

FC2でファイル作成
土台はFC2になっているので、そこに必要なファイルを作ります。

public_htmlのところにカーソルを合わせて右クリックすると、ディレクトリ展開などのメニューが開きます。
ファイル作成のメニューからでも良いですし、プログラミングが出来上がっていればダウンロードからパソコンにあるファイルを引っ張ってくるのも良いですね。

画像収納用のファイルを用意
というわけで、ファイルを作れる画面に来ました。
とりあえず画像を収納するファイルを作成しましょう。
ファイル作成から、

ファイルの名前はなんでもいいです。
今回の例では、FFとしました。

Javascriptのファイル作成も用意
同様に、Javascriptのファイルも作ってしまいましょう。
まだ本格的にJavascriptの記述を学んでいないので、ファイルを作ってプログラミングはそのままコピペしてください。

ファイル名はなんでもいいのですが、末字に .js とあります。
そうすることで、これはJavascriptのファイルだと、パソコンが認識できます。