- ベストアンサー
ファイルの選択で画像選択時のイベント
お世話になります よろしくお願いします。 htmlの<input type="file" name="pic">でファイルの選択で画像を選択して 開くをクリックしたときいjaavascriptでイベントを取得したいのですが どうすればいいでしょうか？ ファイルの選択で開くをクリックすると 画像をサーバーにアップしてその画面に表示 という動作をしたいです。 参考になるサイトなどありましたらよろしくお願いします。
- SAY_MAN
- お礼率61% (74/121)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞＞＞ ファイルの選択で画像を選択して開くをクリックしたときいjaavascriptでイベントを取得したい 画像を選択すると値が変わるので、onchange属性を使って、 <input type="file" name="pic" onchange='alert("onchange")'></div> でうまく行くようです。onclick属性も同時につけた場合、IEと、Firefoxは順番が異なりまです。 <input type="file" name="pic" onclick='alert("HELLOO")' onchange='alert("onchange")'></div>
関連するQ&A
- inputボックスでのファイル選択後、自動でinputボックス作成
<input type="file">でアップロードファイルを選択後、自動で新しい<input type="file">のボックスが表示されるような仕組みを作れますか？ onclick（）のようなイベント取得方法で、ファイルが選択されたというようなイベントなどがありますでしょうか？ ファイルを連続で選択し、それらをまとめてアップロードする必要があります。
- ベストアンサー
- JavaScript
- ＷＥＢサイトからファイルマネージャへ直接画像をアップロードするには
はじめまして。 自分のサイトのページからファイル参照をし、 ［<FORM method="POST" enctype="multipart/form-data" action="img_upload.php"> <INPUT type="hidden" name="MAX_FILE_SIZE" value="65536"> 画像のファイル名を入力してください（最大64KByte） <INPUT size="30" type="file" name="upfile"><BR> <BR> <INPUT type="submit" name="submit" value="送信"> <INPUT type="reset" name="reset" value="リセット"> </FORM>］ 自分の借りているレンタルサーバにあるファイルマネージャへ直接画像をアップし、 違うページで表示させたいのですが可能でしょうか。 サンプルソースや参考になるサイトを教えていただけるとありがたいです。 どうかよろしくお願いいたします。
- 締切済み
- HTML
- ファイルのアップロードが出来ない
送信フォームを使って画像をアップロードさせたいのですが、うまくいきません。ブラウザ上でエラー表示は出ないのですが、移動させたいディレクトリにファイルが入って来ない状況です。 初心者なので、参考書を片手に例文をカスタマイズしていったので、アルゴリズム自体がどこか間違っているかもしれないです。 特に下記ソースコード中の 『$path = getcwd();～』 の辺りで、スクリプトのあるディレクトリパスを取得して、パスの末尾に"￥"or"/"を追加しているのは理解出来るのですが、 そもそも何のスクリプトのパスを取得しているのかが解らず、 結局テンポラリディレクトリからの移動先ディレクトリを自分で$new_dirと定義してmove_uploaded_file()しています。 どなたか詳しい方いらっしゃいましたらご教示宜しくお願いします！ ＝＝＝＝＝＝＝＝＝＝＝ソースコード＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <?php if (isset($_POST["submit"])) { //------------------------------------------------------------------------- //■クライアントから取得する元ファイル名を$pic_name、 //■テンポラリディレクトリ名を$pic_tmp //■テンポラリディレクトリからの移動先ディレクトリを$new_dir //------------------------------------------------------------------------- $pic_name = $_FILES["pic"]["name"]; $pic_tmp = $_FILES["pic"]["tmp_name"]; $new_dir = "http://xxx.com/pic/"; //---------------------------------------------------------------------------------- //■エラーメッセージは配列に追加 //---------------------------------------------------------------------------------- $error_message = array(); $path = getcwd(); if (isset($_ENV["OS"]) && preg_match("/window/i", $_ENV["OS"])) { $path .= "\\"; } else { $path .= "/"; } if (strlen($pic_name)>0 && strlen($pic_tmp)>0) { //---------------------------------------------------------------------------------- //■テンポラリディレクトリにファイルがアップされているかチェック //---------------------------------------------------------------------------------- if (is_uploaded_file($pic_tmp)) { //---------------------------------------------------------------------------------- //■ファイルを移動 //---------------------------------------------------------------------------------- if (!move_uploaded_file($pic_tmp, $new_dir .basename($pic_name))) { $error_message[] = "●自画像ファイルのアップロードに失敗しました"; } } } } ?> <html> <form method="post" action="<?=$SERVER["PHP_SELF"]?>" enctype="multipart/form-data" > 画像のアップロードフォーム <input type="hidden" name="MAX_FILE_SIZE" value="100000"> <input type="file" name="pic" size="40"> </html>
- ベストアンサー
- PHP
- アップした画像を表示
よろしくお願いします。 現在 <form action="" name="pic" method="post" enctype="multipart/form-data"> <input type="file" name="header_pic" value="" onchange="uproad_header()"> でonchangeで変更があるとsubmitを実行して画像を入れ替えています。 サーバー上のファイルは変わっています。 表示は <img src="pic1.jpg" width="58" height="58"> です サーバー上のファイルは変わっているので 更新ボタン(F5)を押すと画像は入れ替わるのですが 更新ボタンを押さずにアップされた時点で画像が入れ替わって表示する方法はないでしょうか？ PHP5でやっています。 以上説明が下手ですみませんがよろしくお願いします。
- ベストアンサー
- JavaScript
- 画像アップロード型掲示板でのファイル選択ダイアログ
画像アップロード型の掲示板において、ファイル選択ダイアログでファイル選択したら、 FTPサーバーにアップし、かつ、アップしたユーザー自身が、ブラウザでその画像を見れるという仕様にしたいんですが、FTPサーバー側に選択した画像ファイルが、アップされてないのです。 アップした画像をローカルのブラウザのページで見ると、ｘ印のアイコンだけが表示されていて、中身の画像ファイルが表示されてないのです。ですが、そのｘ印のアイコンを右クリックすると、画像のピクセル数や、FTPサーバー先の絶対パスがちゃんと表示されてるんです。 下記のようなファイル選択ダイアログが表示されるHTMLと、そこから呼び出すPHPスクリプト において、どこか間違っているのか教えていただきたいです。よろしくお願いします。 <html> <head><title>ファイル選択ダイアログ</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <form name="form1" method="POST" enctype="multipart/form-data" action="file_upload.php"> <input type="file" name="result"> <input type="submit" name="upload" value="添付画像"> </form> </body> </html> --------------------------------------------------------------------- <?php $photo = $_POST['photo']; //////////////////////////////////// // ローカル側でファイルをオープン // //////////////////////////////////// $filename = "./files/$photo"; // $parent（親ディレクトリの直下のファイルだから、何もつけなくてよい） echo("filename=".$filename); // デバッグ用 $fp=fopen($filename, 'rb') or die; /* ファイルオープンダイアログで選択したファイルのファイル名はbbs.phpと同じディレクトリにあるfile_uproad.php から見ると、$photoにつけるパスは不要 */ /////////////////////////////////////////////////////////////////////// // FTPサーバーに接続、ログイン、サーバー側のカレントディレクトリ変更 // /////////////////////////////////////////////////////////////////////// $ftp_server="users109.lolipop.jp"; $ftp = ftp_connect($ftp_server); $res = ftp_login($ftp, "～", "～"; if($res==FALSE){ echo("FTPサーバーのログインに失敗しました。"); exit(1); } $cur = ftp_pwd($ftp); // サーバーにログイン直後のサーバー側のカレントディレクトリ echo("cur=".$cur); exit(1); ftp_chdir($ftp, $cur); // サーバー側のディレクトリを変更 ///////////////////////////////////////////// // FTPサーバーに画像ファイルをアップロード // ///////////////////////////////////////////// $remote_file = $photo; // リモート上でのファイル名指定 echo($remote_file); //if(ftp_fput($ftp, $remote_file, $fp, FTP_BINARY)){ // ローカルでオープンしている画像ファイルをバイナリモードでFTPサーバーにアップロードする if(ftp_fput($ftp, $remote_file, $fp, FTP_BINARY)){ // リモートのカレントディレクトリにアップされる echo "Successfully uploaded $file\n"; }else{ echo "There was a problem while uploading $file\n"; } //////////// // 後処理 // //////////// fclose($fp); ftp_close($ftp); //header("Location: bbs.php"); ?>
- 締切済み
- PHP
- onclickイベントで、PHPの関数をコール
下記のようなPHPスクリプトで、ボタンが押された時の、onclickイベントで<?php upload_file() ?>として PHPのupload_file() 関数をコールしてるのですが、画像ファイルがアップできません。 どこが間違いなのか、教えていただけますか。 --------------------------------------------------------------------------------- <form name="form2" method="POST" enctype="multipart/form-data" action="bbs.php"> <!-- ファイル参照フォームを表示する --> <input type="hidden" name="MAX_FILE_SIZE" value="30000"> <input type="file" name="upfile" tabindex="6"> <input type="button" value="画像を送信" tabindex="7" onclick="<?php upload_file() ?>"> </form>
- 締切済み
- PHP
- ファイル選択ダイアログが表示しない
javascriptで<INPUT type=file name=faile1>を file1.click();でクリックしてファイル選択ダイアログを表示させようとしても表示しません。 formから <INPUT type=file id=file1 name=image style="DISPLAY: none"> <INPUT type="image" src="./img/up02.jpg" id=button1 value=Button name=button1 を出すとファイル選択ダイアログが表示されます。 独自のボタンイメージでファイル選択ダイアログを表示したいために <INPUT type="image"をクリックされたときにjavascriptで <INPUT type=file をクリックさせています。 したいことは、独自のボタンで、ファイル選択ダイアログを表示して、 phpに選択されたファイルパスを送信したいです。 下記コードをご参考にしてください。 <html> <head> <title>upload test</title> </head> <body> 何かの編集ページとか <iframe name="uploader" src="" style="width:0px;height:0px;border:0px;"></iframe> <form name=form1 target="uploader" method="POST" action="http://*.**.**.*/test.php" enctype="multipart/form-data"> <INPUT type=file id=file1 name=image style="DISPLAY: none"> <INPUT type="image" src="./img/up02.jpg" id=button1 value=Button name=button1 LANGUAGE=javascript onclick="return button1_onclick()"/> </form> <script type="text/javascript"> <!-- function button1_onclick() { window.alert("クリックされた"); file1.click(); document.form1.submit(); } //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- ファイル選択ダイアログ
今、WindowsMediaPlayerコントロールを埋め込み、 ファイル選択ボタンで選択したファイルを再生ボタンで再生したいです。 <INPUT TYPE="file" NAME="SelectFile" VALUE="ファイル選択" > でファイル選択ダイアログが開くのですが、 選択したファイルを再生ボタンで再生するにはどのようにしたらいいのでしょうか？ 下記のHTML（OBJECT省略）で、決めうちの"sample.wmv"ファイルは再生が確認できています。 ---------------------------------------------------------------- <INPUT TYPE="file" NAME="ButtonSelectFile" VALUE="ファイル選択" > <INPUT TYPE="button" NAME="ButtonPlay" VALUE="再生" OnClick = "StartMeUp()"> <INPUT TYPE="button" NAME="ButtonStop" VALUE="停止" OnClick = "ShutMeDown()"> <SCRIPT LANGUAGE="JavaScript"> function StartMeUp() { Player.URL = "sample.wmv"; } function ShutMeDown() { Player.controls.stop(); } ---------------------------------------------------------------- まとめますと、 「ファイル選択ボタンで選択したファイルを再生ボタンで再生したい。」 です。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- サーバカレント配下サブフォルダ内にファイルをアップさせたいのですが…
ブラウザからローカルのファイルを指定して、実行ボタンを押すとサーバに、指定したファイルがアップされるプログラムを作成中です。 『copy($file, $file_name);』で、サーバにアップされるところまでは出来たのですが、このソース（.php）が存在するカレントに、ファイルがアップされてしまいます。 カレント配下に作成してあるサブフォルダ内にアップさせるには、どうすれば良いでしょうか？ （もしくは、カレントにアップされたファイルを配下サブフォルダに移動でも良いですが） ＜以下PHPソースの抜粋＞ ~~~~~~~~~~~8<~~~~~~~~~~~~8<~~~~~~~~~~~ <TD nowrap><FONT size="-1">ファイル file</FONT></TD> <TD nowrap> <INPUT TYPE="hidden" NAME="MAX_FILE_SIZE" SIZE="65536"> <INPUT TYPE="file" NAME="file" SIZE="42"> </TD> ~~~~~~~~~~~8<~~~~~~~~~~~~8<~~~~~~~~~~~ <TD nowrap><INPUT id=submit1 NAME=submit1 type=submit value=" 実 行 "></TD> ~~~~~~~~~~~8<~~~~~~~~~~~~8<~~~~~~~~~~~ if ($file_name != '' && $file_size != 0) { copy($file, $file_name); } ~~~~~~~~~~~8<~~~~~~~~~~~~8<~~~~~~~~~~~
- ベストアンサー
- PHP
- 候補画像から選択して画像をアップロード
通常、画像のアップロードは <form action="upload.php" method="post" enctype="multipart/form-data"> <p> 画像をアップロードする<br> <input type="file" name="pic"> </p> <p> <input type="hidden" name="code" value="<?php echo $code ?>"> <input type="submit" name="submit" value="アップロード"> </p> </form> というフォームを使っています。 ↓ ★画像アップロードフォーム http://pips.chu.jp/0/up/upload.php これで、「参照」を押すと、ローカルのフォルダから画像を選べますが、 あらかじめ作成した画像の候補の中から１つ選んでアップロードするにはどうすればよいでしょうか。 画像の候補は、「img」というフォルダを作り、その中に格納しています。 ↓ ★候補画像 http://pips.chu.jp/0/up/img/sample1.jpg http://pips.chu.jp/0/up/img/sample2.jpg http://pips.chu.jp/0/up/img/sample3.jpg 「参照」のボタンを押すと、「img」フォルダに行く方法が知りたいです。 また、ラジオボタンやセレクトボタンを使った方法があれば教えて頂けないでしょうか。 何卒よろしくお願いします。
- ベストアンサー
- PHP
お礼
ありがとうございます onchangeが頭になかったです。 ありがとうございました。