<input type="file">で画像を選択
- <input type="file">を使用してHTMLのページ内で画像を選択し、その画像を表示する方法を教えてください。
- 上記のコードを使用して画像を表示していますが、画像が表示されません。どこが間違っているのか教えてください。
- また、動作サンプルも表示できません。動作サンプルを表示する方法も教えてください。
- ベストアンサー
<input type="file">で画像を選択
HTMLのページ内で<input type="file">で画像を選択して その画像を現在のHTMLページに表示する という質問のベストアンサー http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1151913361 にしたがって、使ってみましたが、表示されません。 使い方のどこがまちがっているか教えてください。 また、そこにある動作サンプルが見えません。 動作サンプルを見る方法もわかりましたら、お願いします。 -------------------------- <html lang="ja"> <head> <title></title> <script type="text/javascript"> function dispImg() { var myFile = document.getElementById('ans5'); var src = null; if (window.File) { src = myFile.files[0].getAsDataURL(); } else { src = myFile.value; } document.getElementById('DISP').src = src; } </script> </head> <body> <form name ="a"> 写真を指定してください： <input type="file" name="ans5" Onchange="dispImg();"><br> <img src="" alt="" id="DISP"> </form> </body> </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)
もっと簡単にできるんじゃない？ <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 … にある動作サンプルの見方もお教えください。
関連するQ&A
- <input type="file"/>
に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか？
- ベストアンサー
- JavaScript
- input type="file"のvalue監視
input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptのfileオブジェクト（input type="file"）の選択を初期化したい
fileでユーザーが選択したファイルを、未選択の状態にしたいのですができません。 valueプロパティを""にしてもnullにしても、元の値（ファイルパス）が入ったままです。 HTML: <input type="file" name="picture_file"> JavaScript: document.form_main.picture_file.value = ""; alert(document.form_main.picture_file.value); document.form_main.picture_file.value = null; alert(document.form_main.picture_file.value); どうにかして初期化する方法はありますでしょうか？file以外のほかのinput項目は変更せず、また画面遷移もせず実現する必要があります。
- ベストアンサー
- JavaScript
- IE8で<input type="file">のテキストエリアをクリア
IE8で、<input type="file">を使用していますが、 BMPファイルを選択した場合には、テキストエリアをクリアしたいのですが、 javascriptで行うと、エラーになってしまいます。 テキストエリアは複数あり、javascriptに可変変数を渡しています。 どなたか、解決方法をご存知の方、いらっしゃいましたら、 ご教授願います。よろしくお願い致します。 具体的なコードは、以下の通りです。 <script type="text/javascript"><!-- function preview_image(obj_image, image_id, oID1, oID2) { var ext = document.getElementById(oID1).value; if(ext.match(/\.(bmp)$/i)){ alert("bmpファイルは、アップロードできません。"); document.getElementById(oID2).src = "/img/dummy.jpg"; obj_image.style.color='#FFFFFF' return false; } else { document.getElementById(image_id).src= obj_image.value; document.getElementById(image_id).style.display="inline"; } }
- 締切済み
- JavaScript
- ファイル選択と同時にアップロード HTML+JS
HTMLとJava Scriptのことを質問させてください <form>タグからファイルを選択すると同時をアップロードしたいと思っています。 複数の「ファイルを選択ボタン」を設置し、それぞれ"001.jpg"、"002.jpg"など指定の名前でアップロードしたいです。 下記のようにいくつかの<form>タグを設置し、javascriptでコントロールできるかと思いケース1のように書いた場合はうまくいったのですが、ケース2のように複数並べて記述した場合、動かなくなり困っております。 どなたか教えていただけないでしょうか？ よろしくお願いいたします ケース1） <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="001.jpg" /> <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="002.jpg" /> <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script> ケース2） <form id="upload_file1" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="001.jpg" /> <input type="file" id="file_id_1" name="file_name" accept="image/jpeg"> </form> <form id="upload_file2" action="file_upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="picture_id" value="002.jpg" /> <input type="file" id="file_id_2" name="file_name" accept="image/jpeg"> </form> <script> var form = document.getElementById("upload_file1"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; var form = document.getElementById("upload_file2"); var input = form.file_name; input.onchange = function (){ if(this.value){ form.submit(); } }; </script>
- ベストアンサー
- JavaScript
- input type="image"でマウスクリック画像変更がうまくいかない
input type="image" で表示した画像を変更したいのですがうまくいきません。 <form name="form1" action="" method="POST"> <input type="image" src="A.gif" name="A" onclick="ChangeImage();"> </form> <script language="javascript"> function ChangeImage(){ document.form1.A.src="B.gif" } </script> というコードをなんですが、ボタンをクリックしても何も起こりません。 アンカータグを使わずにinputで行いたいのですがどなたかご存じないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
- レイヤーにある画像を変更したいです。
ボタンを押したらレイヤー内の画像を変更したいのですが 可能でしょうか？ レイヤーでなければできるのですが・・ <html> <head> <SCRIPT language=JavaScript> <!-- function a(fishimg){ document.getElementById('layer1').images[0].src = fishimg; } //!---> </SCRIPT> </head> <body> <form name="form1"> <input type="button" onClick="a('fish2.gif')" value="レイヤーの画像を変えます。"> </form> <DIV id="layer1"> <IMG src="fish.gif"> </DIV> </body></html>
- ベストアンサー
- JavaScript
- ラジオボタンの選択に応じてインプットを表示する。
お世話になります。 現在、ラジオボタンの選択に応じてインプットのフィールドが表示されるようなHTMLフォームを作っているのですが、煮詰まってしまいました。どうしてもうまくいかないのですが、 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function checkradio( disp ) { document.getElementById('input').style.display = disp; } //--> </script> </head> <body> <form action="xxx"> <p> <input type="radio" name="domain" id="1" value="1" onclick="checkradio('none');" /> <label for="1">選択１</label><br /> <input type="radio" name="domain" id="2" value="2" onclick="checkradio('none');" /> <label for="2">選択２</label><br /> <input type="radio" name="domain" id="3" value="3" onclick="checkradio('block');" checked /> <label for="3">選択３</label><br /> </p> <p id="input"> 選択３の詳細を書いてください。：<input type="text" id="input" name="select3" value="" size="20" /> </p> </form> </body> </html> と、こんな感じで、３を選択した時しかインプットを表示できません。選択１や選択２を表示した時には、「選択１の詳細を書いてください。」または「選択２の詳細を書いてください。」と表示させたいのですが、どこをどんな風に直せばいいでしょうか？ それと同時に初期画面ではこのインプットを非表示にしてラジオボタンを選択した時に表示されるようにしたいと思っています。 よろしくお願いします。
- ベストアンサー
- JavaScript
- document.getElementById
document.getElementByIdでURLを変数に代入したいのですが うまくリンクになりません。 どこが間違っているのでしょうか？ どうしたらよいのでしょうか？ ソースはこちらです <!DOCTYPE html> <html lang="ja"> <head> <script language="JavaScript" type="text/javascript"> var url = 'http://www.goo.ne.jp/'; var urlgoo = document.getElementById("urlgoo").src = url; </script> </head> <body> <a id="urlgoo" title="sample">Link</a> </body> </html>
- ベストアンサー
- JavaScript
- 同一nameの input type="text" の合計を計算したい
初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function kakunin() { var sub = Form.getInputs('form1', 'text'); （ var subtotal = ～～～; ここに上で得た数字を合計するみたいなものがくるのかなと・・・） var total = subtotal * 200; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 動きました！！ すばらしいです。 ２つの入力の場合も、 <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でした。 助かります。ありがとうございます。