- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：<input type="file">で画像を選択）
<input type="file">で画像を選択
このQ&Aのポイント
- <input type="file">を使用してHTMLのページ内で画像を選択し、その画像を表示する方法を教えてください。
- 上記のコードを使用して画像を表示していますが、画像が表示されません。どこが間違っているのか教えてください。
- また、動作サンプルも表示できません。動作サンプルを表示する方法も教えてください。
- iruiru298
- お礼率95% (116/121)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
非標準のメソッドが使われています。 Fileを扱うためには基本FileReaderを使わなければなりません。 それよりもっといいのが、BlobURL化することです。 写真を指定してください： <form> <input type=file onChange="this.form.disp.src=window.URL.createObjectURL(this.files[0])"> <br><img name=disp> </form>
その他の回答 (1)
- nda23
- ベストアンサー率54% (777/1415)
回答No.1
もっと簡単にできるんじゃない？ <html> <script language="javascript"> function ファイル変更時(パス指定) { document.getElementById("見本").src = パス指定.value; } </script> </head> <body> <form name ="a"> 写真を指定してください： <input type="file" name="ans5" onchange="ファイル変更時(this);"> <br> <img src="" alt="" id="見本"> </form> </body> </html> 個人的にシンボル名は日本語にするのが好みです。
質問者
お礼
回答ありがとうございます。 私のブラウザはFirefoxなのですが、 HTMLと同じフォルダにある写真であれば、表示しましたが、 別のフォルダにある写真では何も表示されません でした。よろしくお願いします。 また、ベストアンサー http://detail.chiebukuro.yahoo.co.jp/qa/question … にある動作サンプルの見方もお教えください。
お礼
回答ありがとうございます。 動きました！！ すばらしいです。 ２つの入力の場合も、 <input type=file onChange="this.form.disp1.src=window.URL.createObjectURL(this.files[0])"> <input type=file onChange="this.form.disp2.src=window.URL.createObjectURL(this.files[0])"> <br><img name=disp1> <img name=disp2> でOKでした。 助かります。ありがとうございます。