ファイル名の取得がうまくいきません

質問

<input type="file" name="ans4" />
で取得したファイル名を取得する方法がわかりません。

指定したファイル名とそのの画像が表示されるというHTMLプログラムですが、
そのような動作になりません。
確認のため、指定した画像ファイル名を直接書くと、その画像が表示されます。

<form name ="a">
写真を指定してください：<input type="file" name="ans4" /><br>
<IMG SRC = document.a.ans4.value WIDTH="120" HEIGHT="84"><br>
document.write("指定したファイルは" + document.a.ans4.value);
確認用に画像を表示<br>
<IMG SRC="testFig.jpg" WIDTH="120" HEIGHT="84"><br>
</form>

回答No.4

warez

File APIでどうでしょうか。
http://www.html5rocks.com/ja/tutorials/file/dndfiles/

お礼

回答ありがとうございます。
File API参考になります。

なお、以下の記述で、解決しました。
<IMG SRC = document.a.ans4.value WIDTH="120" HEIGHT="84"><br>
を３行に分割して出力すればよかっただけですね。
ありがとうございました。

ーーーーーーーーーーーーーーー
ファイル名の取得
<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>

回答No.3

licht_gkk

＞＞HTMLだけでファイルをアップロードしてアップロードされたファイルを表示するような事は出来ませんが、そこは大丈夫でしょうか？
＞そうなんですか？

そうなんです。

＞サーバー側に画像データを送ることなく、処理できる方法、ないのでしょうか？
formで送信する＝サーバーに送信しています。
その後サーバーで何も処理しなければ送られたデータはそのまま破棄され、
HTMLでimgを書こうと何をしようと画像データは既に破棄されているので表示する手段はありません。

画像を確認後にサーバーに送信したいなら確認までをクライアント側の処理で完結させないといけません。
その為にはFlashなりJavaAppletなりのクライアント上で動作させるしかありません。
※その場合は当然Flashしか画像ファイルを持ってないのでFlashが責任を持ってサーバーに送る必要があります

お礼

回答ありがとうございます。
以下の記述で、解決しました。
<IMG SRC = document.a.ans4.value WIDTH="120" HEIGHT="84"><br>
を３行に分割して出力すればよかっただけですね。
ーーーーーーーーーーーーーーー
ファイル名の取得
<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>

回答No.2

ORUKA1951

前にも回答しましたが、動作を正確に理解してください。
<form action="[URL]">
<input type="file">
</form>
で送信すると、サーバーにはファイル名が渡されるはずです。
・・・この時点では画像はアップロードされていません。・・・
　　送信データはfile:///C:\MY DOCUMENT\****とかになっています。
それをCGI(PHP)側で処理して、改めてフォームを作成します。その時に

<form enctype="multipart/form-data">
<p><img src="[受け取ったファイル名]" style="width:240px;height:auto" alt=""><br>
<input type="file" name="ans3" value="[受け取ったファイル名]"></p>
</form>
になるのですよ。

お礼

回答ありがとうございます。

説明いただいた内容は、submitを押した後の処理の解説ですよね。
私の質問は、submitを押す前の処理についてです。
<input type="file">のファイルの値を指定したときの処理です。

質問をもう一度書いてみますので、よろしくお願いします。
----------------
HTMLファイルの
　document.write("指定したファイルは" + document.a.ans4.value);
の部分は、画面には、たとえば、
　指定したファイルは　c:\hoge.jpeg
となって表示されます。
これは、
　サーバーにファイル名が渡され、
　それをCGI(PHP)側で処理して、改めてフォームを作成し
「document.write("指定したファイルは" + document.a.ans4.value);」
の部分が
　指定したファイルは　c:\hoge.jpeg
という表示になるHTMLが作成され、それをクライアント側で表示しているということでしょうか？

私の理解では、クライアント側でHTMLファイルの
　document.write("指定したファイルは" + document.a.ans4.value);
の部分が、
　指定したファイルは　c:\hoge.jpeg
という文字列に変換されて画面に表示していると思います。

質問、つまり、私がやりたいことは、
　<IMG SRC = document.a.ans4.value WIDTH="120" HEIGHT="84">
の部分を、
　<IMG SRC = "c:\hoge.jpeg" WIDTH="120" HEIGHT="84">
に読み替えて、画像を表示するようなHTMLを書きたいということです。

補足

サーバー側の処理はしていませんが、以下の記述で、解決しました。
<IMG SRC = document.a.ans4.value WIDTH="120" HEIGHT="84"><br>
を３行に分割して出力すればよかっただけですね。
ーーーーーーーーーーーーーーー
ファイル名の取得
<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>

回答No.1

licht_gkk

HTMLだけでファイルをアップロードしてアップロードされたファイルを表示するような事は出来ませんが、
そこは大丈夫でしょうか？

・クライアントからファイルをアップロード
・サーバーでアップロードされたファイルをサーバー上に保存
・サーバーに保存されたファイルパスを指定したHTMLを生成し表示

こんな流れになるのでサーバー側の処理を実装しないとダメだと思います。
サーバー上で動作するCGIなりPHPなり何を使うか決めて、
そのカテゴリでご質問された方がいいかと思います。

お礼

回答ありがとうございます。
＞HTMLだけでファイルをアップロードしてアップロードされたファイルを表示するような事は出来ませんが、そこは大丈夫でしょうか？
そうなんですか？

C#で書くと
private void pictureBox1_DragDrop(object sender, DragEventArgs e)
{
fileName = ((string[])e.Data.GetData(DataFormats.FileDrop, true))[0];
Bitmap bitmap = null;
bitmap = new Bitmap(fileName);
pictureBox1.Image = bitmap;
}
のような感じで、サーバー側に画像データを送ることなく、処理できる方法、ないのでしょうか？

テキストボックスに、テキストをコピペすると、サーバー側にテキストデータを送ることなく、コピペしたテキストがテキストボックスに表示されますよね。
同じ様に、画像ファイルをドラッグアンドドロップすると、サーバー側に画像データを送ることなく、ドラッグアンドドロップした画像ファイルの画像が画像ボックスに表示される方法ないのでしょうか？

補足

サーバー側の処理はしていませんが、以下の記述で、解決しました。
<IMG SRC = document.a.ans4.value WIDTH="120" HEIGHT="84"><br>
を３行に分割して出力すればよかっただけですね。
ーーーーーーーーーーーーーーー
ファイル名の取得
<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>