- ベストアンサー
画面遷移しないで画像の追加を行うには？
現在htmlのformで画像をアップロードしPHPで受け取ってhtmlのテーブルの中で表示するプログラムを作っています。 ここにjavascriptを追加してテーブル表示の際に非同期で行いたいと考えています。 フォームの下にテーブルがありアップロード完了と同時に画面遷移せずに画像が追加されるという具合です。 prototype.jsを使えばできそうという所までたどり着きましたがなかなかうまくいきません。どなたかお力を貸していただけないでしょうか。 またテーブルに画像が追加されたときにもそのタイミングで自動的に更新したいです。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
情報が不足しているので、どの部分がうまくいかないのかがわらりません。下記のようなページがあって <body> <form action="http://hogehoge/hoge.php"> <input type="file" name="upfile" id="upfile" /> <input type="submit" name="sbtn" id="stbn" value="アップロード" /> </form> <table><tbody id="gazou"><tr> <img src="http://hogehoge/hoge1.jpg"> </tr></tbody></table> </body> ブラウザーからhoge2.jpgを選んで、hogehogeにアップロードすると、 hoge.phpが、hoge2.jpg受信してサーバー内に保存する。 javascript側は送信と同時に、 <tr><img src="http://hogehoge/hoge2.jpg"><tr> を、<tbody id="gazou">にapendする。 これを、サーバー非同期にやりたいという意味ですか？ ajaxでやりたいという事ですので、まずサーバー側のPHPが 何を受け取って、何の処理をやって、何を返しているのかを 明らかにして下さい。
補足
回答ありがとうございます。情報不足でしたね、すいません。 今の所のプログラムは <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>ファイルアップローダー</title> <link rel="stylesheet" href="css/lightbox.css" type="text/css"> <link rel="stylesheet" href="css/main.css" type="text/css"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/jsvalidate.js"></script> </head> <body><center> <form name="dataForm" method="post" enctype="multipart/form-data" action="uploaderajax.php"> <table> <tr><td>ファイルを選択</td><td><input type="file" name="data" size="30"></td></tr> </table> <input type="submit" value="送信！"> </form> <!--ここからPHPでのファイルアップロード処理--> <?php echo "<h2>AJAX ver.</h2><br/>"; $updir = "./upload/"; //フォルダの名前 $filename = $_FILES['data']['name']; //UPされたファイルを変数に入れる if(file_exists($_FILES['data']['tmp_name'])){ //ファイルがあるかどうか $filesize = filesize($_FILES['data']['tmp_name']); //ファイルサイズを取得 if($filesize <= 100000){ if(ereg("(^[a-zA-Z0-9_-]+)\.(jpg)|(^[a-zA-Z0-9_-]+)\.(gif)",$filename)){ //JPG or GIF move_uploaded_file($_FILES['data']['tmp_name'], $updir.$filename); //フォルダに保存 echo "ファイル名 " . $filename . " アップロード成功！"; echo $_FILES['data']['error']; echo "<br><br>"; //echo "<img src='./upload/$filename'>"; //画像の表示 }else{ echo "jpg かgif のファイルしかアップできません。或いはハイフン以外の記号があります。"; } }else{ echo "$filesize Byte ファイルサイズが大きすぎます。<br>100000 Byte 以下にしてください。"; } }else{ echo "ファイルをアップした順にテーブルに並べていきます。20枚でお終い。<br>"; } //ここから保存されたファイルの表示部分 if ($handle = opendir($updir)) { //フォルダを開く echo "<table class=\"01\">"; $cnt = 1; //カウントする while (false !== ($file = readdir($handle))) { //ファイルを全て読み込む if ($file != "." and $file != "..") { //.と..を読まないようにします if($cnt % 5 == 0){ //カウントが５で割って０なら右端なので</tr>を付ける echo "<td><a href='$updir/$file' target='_blank' rel=\"lightbox\"><img src='$updir/$file' width='112'></a> <div>{$view_name}</div></td></tr>"; }else if($cnt % 5 == 1){ //５で割って１なら左端なので<tr>を付ける echo "<tr><td><a href='$updir/$file' target='_blank' rel=\"lightbox\"><img src='$updir/$file' width='112'></a> <div>{$view_name}</div></td></td>"; }else{ echo "<td><a href='$updir/$file' target='_blank' rel=\"lightbox\"><img src='$updir/$file' width='112'></a> <div>{$view_name}</div></td></td>"; } $cnt++; } if($cnt > 20){ //ファイルを２０枚アップロードしたら終了 break; } } closedir($handle); //フォルダを閉じる } //ここからテーブルがぴったり右端で終わらなかった時の処理 if(!(($cnt-1) % 5 == 0)){ //右端で終わらなかったら $cvr = 5-($cnt-1) % 5; for($a=1;$a<=$cvr;$a++){ //足りない分だけ補う echo "<td width='112'> </td>"; } echo "</tr>"; } ?> </center> </body> </html> 複数の人が使うことを前提にしています。このページを見ているときに他人がアップロードした場合に更新をしなくても自動で更新されるようにしたいと考えています。
お礼
回答ありがとうございます。 もう一度考えを練り直してみます。 いろいろとありがとうございました。