- ベストアンサー
画像送信ホームで画像を表示できない問題について
- 質問者は、画像送信するホームと、別のウィンドウに表示するためのJavaScriptコードを使用していますが、画像が表示されない問題に困っています。
- 質問者は、onSubmitイベントを使用して、送信前に画像を別のウィンドウで確認する機能を実装したいと考えています。
- 質問者は、画像の参照ボタンで指定した画像を別のウィンドウで表示する方法についてアドバイスを求めています。
- hana3090
- お礼率29% (65/222)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
12行: imag = "file:///"+document.Form1.file_1.value.replace(/\\\\/g, '/'); 17行: new1.document.writeln("<META HTTP-EQUIV=\\"Content-Script-Type\\" CONTENT=\\"text/javascript\\">"); 21行: new1.document.writeln("<img src=\\""+imag+"\\">"); 38行: print "<FORM NAME=\"Form1\" METHOD=\"POST\" ACTION=\"./photo2.cgi\" ENCTYPE=\"multipart/form-data\" onSubmit=\"return check()\">\n"; ひょっとして手元にPerlの動作環境が無いのでしょうか？ 容易に動作を確認することができるとできないとでは、デバッグ作業は天国と地獄の差があります。 Perlで開発する者にとってPerlの動作環境は必須ですよ。
その他の回答 (3)
- mrumesuke
- ベストアンサー率45% (254/557)
解説が抜けていました。 #3の修正が必要な理由は分かりますよね？ HTMLに直接記述するか、CGIで動的に出力するかの違いによるものです。CGIで出力する場合、（この場合はPerlで記述されていますから）Perlの言語使用の影響を受けているわけです。 また、#3だけではHTMLの文法的にまだおかしいですね。 <HEAD>～</HEAD>の間に<TITLE>～</TITLE>や必要なMETAタグを入れてください。 JavaScriptもヘッダに入れていいでしょう。 ところでなぜCGIにする必要があるのでしょうか？ 素直にHTMLファイルに記述すれば#1のコードで済むのですが。（noscript対策を考慮しないのであれば、後半のFORMはJavaScriptで出力せずに直接タグ打ちして良い。CGIがそう出力しているように。） CGIで全部出力するとは思わなかったのでそのように回答してあります。
- 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"; よろしくお願いします。
お礼
解答ありがとう御座います、 別画面に画像を表示出来ました、 色々な参考書を調べても分からなかったこたが解決できました。