- ベストアンサー
画像送信ホームで画像を表示できない問題について
- 質問者は、画像送信するホームと、別のウィンドウに表示するためのJavaScriptコードを使用していますが、画像が表示されない問題に困っています。
- 質問者は、onSubmitイベントを使用して、送信前に画像を別のウィンドウで確認する機能を実装したいと考えています。
- 質問者は、画像の参照ボタンで指定した画像を別のウィンドウで表示する方法についてアドバイスを求めています。
- hana3090
- お礼率29% (65/222)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- mrumesuke
- ベストアンサー率45% (254/557)
- mrumesuke
- ベストアンサー率45% (254/557)
まず第一に、CGIによって出力されたHTML文書が文法的に正しいこと（そして私の回答に準拠していること）を確認してください。 （誤りがあるときはCGIを修正してください） さて、気になる点を挙げます。 print "<INPUT TYPE=\"file\" NAME=file_1 VALUE=\"\" SIZE=70 >\n"; ↓ 元発言では NAME=$file_1 となっています。 今回も NAME=$file_1 (あるいは NAME=\"$file_1\") ではないでしょうか？ $file_1なら変数$file_1の値は正しい値ですか？（期待した値になっていますか） ※ NAME属性を動的に変化させる仕様なら、Javascriptの部分もそれ相応に対応させてください。 全体的な仕様が見えないのでこの程度の助言しかできません。 これで直らなければ、補足に貼らなかった場所に誤りがあるのかもしれません。 具体的な助言が必要なら、CGIの出力結果（HTML文書）を貼り付けてください。 # 余談になりますが、<noscript></noscript>を使用して、JavaScriptを使用しない環境からもpostできるようにした方がアクセシビリティーは向上すると思います。#1に書き忘れたためここで補足します。
補足
再度の解答ありがとう御座います、CGIの全文ですよろしくお願いします。 #!/usr/bin/perl print "Content-type: text/html\n"; print "\n"; print "<HTML>\n"; print "<HEAD>\n"; print "</HEAD>\n"; print <<"END_HERE"; <SCRIPT language="JavaScript"> <!-- function check() { imag = "file:///"+document.Form1.file_1.value.replace(/\\/g, '/'); var new1 = window.open('','new1', 'width=200, height=250'); new1.document.open(); new1.document.writeln("<HTML lang='ja'>"); new1.document.writeln("<HEAD>"); new1.document.writeln("<META HTTP-EQUIV=\"Content-Script-Type\" CONTENT=\"text/javascript\">"); new1.document.writeln("<TITLE>確認<"+"/TITLE>"); new1.document.writeln("<"+"/HEAD>"); new1.document.writeln("<BODY>"); new1.document.writeln("<img src=\""+imag+"\">"); new1.document.writeln("<SCRIPT type='text/javascript'>"); new1.document.writeln("<!-"+"-"); new1.document.writeln("var conf = confirm('ok');"); new1.document.writeln("//-"+"->"); new1.document.writeln("<"+"/SCRIPT>"); new1.document.writeln("<"+"/BODY>"); new1.document.writeln("<"+"/HTML>"); new1.document.close(); return new1.conf; } //--> </SCRIPT> END_HERE print "<BODY>\n"; print "<TITLE>投稿</TITLE>\n"; print "<BLOCKQUOTE>\n"; print "<FORM NAME=\"Form1\" METHOD=\"POST\" ACTION=\"./photo2.cgi\" ENCTYPE=\"multipart/form-data\" onSubmit=\"check()\">\n"; print "<TABLE border=1>\n"; print "<TR><TD><FONT COLOR=\"000080\">名前</FONT></TD>\n"; print "<TD><FONT COLOR=\"000080\"><INPUT TYPE=\"text\" name=\"name\" SIZE=\"20\" STYLE=\"font-size:14pt\"></FONT></TD></TR>\n"; print "<TR><TD><FONT COLOR=\"000080\">タイトル</FONT></TD>\n"; print "<TD><FONT COLOR=\"000080\"><INPUT TYPE=\"text\" name=\"title\" SIZE=\"40\" STYLE=\"font-size:14pt\"></FONT></TD></TR>\n"; print "<TR><TD><FONT COLOR=\"000080\">写真</FONT></TD>\n"; print "<TD><FONT COLOR=\"000080\">\n"; print "<INPUT TYPE=\"file\" NAME=\"file_1\" VALUE=\"\" SIZE=70 ></FONT></TD></TR>\n"; print "</TABLE><BR>\n"; print "<INPUT TYPE=\"submit\" NAME=\"button\" VALUE=\"新規投稿\">\n"; print "<INPUT TYPE =\"reset\" value = \" 取 消 \">\n"; print "</FORM>\n"; print "</BLOCKQUOTE>\n"; print "</BODY></HTML>\n"; exit;
- mrumesuke
- ベストアンサー率45% (254/557)
function check() { imag = "file:///"+document.Form1.file_1.value.replace(/\\/g, '/'); var new1 = window.open('','new1', 'width=200, height=250'); new1.document.open(); new1.document.writeln("<HTML lang='ja'>"); new1.document.writeln("<HEAD>"); //new1.document.writeln("<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=～\">"); new1.document.writeln("<META HTTP-EQUIV=\"Content-Script-Type\" CONTENT=\"text/javascript\">"); new1.document.writeln("<TITLE>確認<"+"/TITLE>"); new1.document.writeln("<"+"/HEAD>"); new1.document.writeln("<BODY>"); new1.document.writeln("<img src=\""+imag+"\">"); new1.document.writeln("<SCRIPT type='text/javascript'>"); new1.document.writeln("<!-"+"-"); new1.document.writeln("var conf = confirm('ok');"); new1.document.writeln("//-"+"->"); new1.document.writeln("<"+"/SCRIPT>"); new1.document.writeln("<"+"/BODY>"); new1.document.writeln("<"+"/HTML>"); new1.document.close(); return new1.conf; } document.write("<FORM NAME=\"Form1\" METHOD=\"POST\" ACTION=\"./photo.cgi\" onSubmit=\"return check();\">\n"); document.write("<INPUT TYPE=\"file\" NAME=\"file_1\" VALUE=\"\">\n"); document.write("<INPUT TYPE=\"submit\" NAME=\"button\" VALUE=\"新規投稿\">\n"); //- memo - //IE6SP1とNetscape7.0で確認済み。 //Operaには未対応。（断念（泣）） //CONTENT="text/html; charset=～"をコメントアウトしたのは、ブラウザによって出力される文字コードが異なる(IE6はShift_JIS, Netscape7はUTF-8)ようなので。 //document.openは有っても無くても変わらない気がするけど、、、念のため。(^^;
補足
解答ありがとう御座います、下記のPerlのCGIで実行したのですが、javascriptは実行されてないようです、 print "<FORM NAME=\"Form1\" METHOD=\"POST\" ACTION=\"./photo.cgi\" ENCTYPE=\"multipart/form-data\" onSubmit=\"return check()\">\n"; print "<INPUT TYPE=\"file\" NAME=file_1 VALUE=\"\" SIZE=70 >\n"; print "<INPUT TYPE=\"submit\" NAME=\"button\" VALUE=\"新規投稿\">\n"; print "<INPUT TYPE =\"reset\" value = \" 取 消 \">\n"; print "</FORM>\n"; よろしくお願いします。
お礼
解答ありがとう御座います、 別画面に画像を表示出来ました、 色々な参考書を調べても分からなかったこたが解決できました。