写真で回答するアンケート

質問

写真で回答するアンケートを作りたいのですが、どのように書いたらよいのかわかりませんので、教えてください。

アンケートで文字で回答してもらう場合には、
氏名：<input name="ans1" /><br>
困った点：<textarea name="ans2" rows="4" cols="40">
自由に意見を記述してください。そのときの写真を下の箱に入れてください。
</textarea><br>
でOKですが、写真を入れる箱に当たる以下の部分にどのように書いたらよいのかわかりません。

困ったときの写真：
<IMG SRC="＜＜ここに記入するHTMLがわかりません＞＞" WIDTH="120" HEIGHT="84">

調べたところ、
困ったときの写真：<input type="file" name="ans3" /><br>
とすれば、写真ファイルの指定は入力できますが、
入力した写真を、箱に表示することができません。

よろしくお願いします。

回答No.1

ORUKA1951

<p>
氏名：<input name="ans1" value="">
</p>
<p>
困った点：<textarea name="ans2" rows="4" cols="40">
自由に意見を記述してください。そのときの写真を下の箱に入れてください。
</textarea>
</p>
<p>
困ったときの写真：
<input type="file" name="ans3">
</p>
でよいです。段落違うので<br>じゃなく<p></p>でマークアップしましょう。内容のない要素の最後が/>になっていますが、それだとXHTMLになります。当然、要素、属性は小文字でなければなりません。
　まあ、上記のようにHTMLでかかれるほうが楽でしょう。

　このままでは画像は表示されませんから、
1) <form action="[URL]" method="post" enctype="multipart/form-data">
　として一旦サーバーに送信して、サーバーの画像処理プログラムでサムネイルを作成して、それを確認画面で
　<p><img src="" width="" height="" alt=""></p>
　として表示させる。
2) <form action="[URL]" method="post">
　　デフォルトのenctype="application/x-www-form-urlencoded"になります。
　で一旦送信させて、[パスを取得し]確認画面で、
<input type="file" name="ans3" value="[パス]">
<input type="file" name="ans3-1" >
　とする。
3) javascriptを用いて、<input type="file">の値を取得して、HTMLソースを書き換える。

　などの方法があるでしょう。

　(1)が最も楽だと思います。サイズ変更なども含めて、画像処理にimagemagickなどのサーバーサイドのプログラムを使用すると良いでしょう。

お礼

回答ありがとうございます。
いろいろな解決法があるのですね。
(1)(2)は一旦サーバーに送信するので、手元のPCでは動作確認できませんので、
(3)の方法で、具体的な記載方法、勉強してみます。

ところで、
＞3) javascriptを用いて、<input type="file">の値を取得して、HTMLソースを書き換える。
とありますが、
「HTMLソースはクライアントのPCの上でjavascriptにより書き換わる」
と理解してよいのでしょうか？
私の理解では、
・javascriptはHTML内に埋め込まれたクライアント側で動くプログラム
・PHPは、サーバー側で動く、HTMLソースを出力するプログラム
となっていて、それと矛盾するので理解を超えています。

補足

HTMLファイルと同じ場所にある画像ファイルであれば、以下のHTMLで表示できることがわかりました。

<IMG SRC = document.a.ans4.value WIDTH="120" HEIGHT="84"><br>
の「document.a.ans4.value」をこの変数の中身の文字列に置き換えるために、
３行に分割して出力すればよかっただけですね。
ーーーーーーーーーーーーーーー
ファイル名の取得
<form name ="a">
写真を指定してください：<input type="file" name="ans4" /><br>

<p>
<script type="text/javascript">
document.write("指定したファイルは" + document.a.ans4.value + "\n");
document.write('<br><IMG SRC="');
document.write(document.a.ans4.value);
document.write('" WIDTH="120" HEIGHT="84"><br>');
</script>
</p>
</form>