• ベストアンサー

画面遷移しないで画像の追加を行うには？

現在htmlのformで画像をアップロードしPHPで受け取ってhtmlのテーブルの中で表示するプログラムを作っています。 ここにjavascriptを追加してテーブル表示の際に非同期で行いたいと考えています。 フォームの下にテーブルがありアップロード完了と同時に画面遷移せずに画像が追加されるという具合です。 prototype.jsを使えばできそうという所までたどり着きましたがなかなかうまくいきません。どなたかお力を貸していただけないでしょうか。 またテーブルに画像が追加されたときにもそのタイミングで自動的に更新したいです。

  • AJAX
  • 回答数2
  • ありがとう数28

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

＜＝このページを見ているときに他人がアップロードした場合に更新をしなくても自動で更新されるようにしたいと考えています。＝＞ 　php側でタイマー見たいな物をセットして、定期的に更新をチェックする にしても、自動でページを更新するのは困難かも、一歩譲って、自動でリ ロードさせるにしても、私はそんなページは嫌いです。 本件とは話がずれますが、何もしなくても勝手に、どんどんロードして 画像が変わったり、ページが遷移していくサイト（エロサイトに多い） がありますが、迷惑に感じるのは私だけでしょうか？。

yo14317
質問者

お礼

回答ありがとうございます。 もう一度考えを練り直してみます。 いろいろとありがとうございました。

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

情報が不足しているので、どの部分がうまくいかないのかがわらりません。下記のようなページがあって <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が 何を受け取って、何の処理をやって、何を返しているのかを 明らかにして下さい。

yo14317
質問者

補足

回答ありがとうございます。情報不足でしたね、すいません。 今の所のプログラムは <!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> 複数の人が使うことを前提にしています。このページを見ているときに他人がアップロードした場合に更新をしなくても自動で更新されるようにしたいと考えています。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • 同一ページへのコメントの追加

    Webページに簡単なコメント欄を追加したいと思っています。 フォームの内容をpostでPHPに渡す方法でファイルに書き込んで 同じページに表示したいのですがページがphpに遷移してしまいます。 具体的にはindex.htmlにフォームを設けて、submitすると そのコメントをファイルに出力し、 その内容をphpで編集して結果をindex.html上に表示したいと思っています。 <form action="index.php" method="post"> という渡し方自体が行けない気がしているのですが方法がわからず 教えていただけないでしょうか。 php, javascript(prototype)でできるとありがたいです。

    • ベストアンサー
    • PHP
  • FORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい

    　　 以下のような画面を作りたいのですが↓ -------------------------------------------------------------------------------- ● a.php （ユーザ情報入力画面） ※フォームに入力する画面 　 　<FORM method="POST" action="b.php"> 　　<INPUT type="text" name="mail"> 　　<INPUT type="submit" name="submit" value="確認"> 　</FORM> ● b.php　（ユーザ情報入力確認画面）※フォームに入力された値を表示する画面 　<FORM method="POST" action="c.php"> 　　<!-- ここには、フォームに入力された値を表示する --> 　　<INPUT type="submit" name="submit" value="登録"> // c.php に遷移する 　　<INPUT type="submit" name="submit" value="戻る"> // a.php に戻る 　</FORM> ● c.php　（完了画面） -------------------------------------------------------------------------------- b.php について質問なのですが、 b.phpにおいて、登録ボタンと戻るボタンを2つつけて、 それぞれ遷移先を変えたいのですが、どうすればいいんでしょうか・・・？ <FORM method="POST" action="c.php">と書いてしまうと、 戻るボタンを押しても戻らずに、c.phpに遷移してしまいますよね？？ こういう場合ってJavaScriptとかで遷移先を指定するんですか・・？ もしそうでしたら、JavaScriptがよくわからないので できればサンプルコード示していただけると助かります・・・。 　　

  • フォーム追加

    ログイン機能をつけた、ユーザー自身がアップロードするサイトを作っています。 このようなフォームをボタンで追加したり削除したりするには普通、jsを使うと思いますが、phpのクラス class form のようにして画像のようにフォームを増減させることはできますか？ もしできる場合、簡単なロジック（方針）を教えて下さい。 なお、フォームには 1.アップロードするファイルのタイトル 2.ファイルの説明 3.ファイル（アップロードするファイル名は私自身で、アップロード者、日付等をディレクトリやファイル名にして、セキュリティに配慮しています。） の3つを入れたいです。

    • ベストアンサー
    • PHP
  • PHP処理実行後のページの遷移について

    現在、新規情報登録画面の作成を行っています。 ＰＨＰで、データベースにインサート処理後、成功したら他のページへ遷移するという処理を行いたいのですが、PHP側の処理が実行されるとページの遷移が行われず、action='遷移ページ指定'したらインサートが実行されません。 JavascriptとPHPともにまだ学習し始めたばかりの初心者で、わかりにくい質問ですが回答のほうよろしくお願いします。 ＜処理の流れ＞ 入力 ↓ 登録ボタン押す ↓ チェック ↓ チェック成功時→ページ遷移 チェック不成功時→ページ遷移なし <html> <head><title>新規登録</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2");</script> </head> <body> <form method="post" action="form_ad_shinki_touroku2.php" name="formA" onsubmit="return AllCheck()"> <script type="text/javascript"> 動的入力フォーム追加機能、チェック機能など </script> <?php SQLの処理など ?> <input type="submit" name="tuika" value="　登　録　"> <input type="button" onclick="addInput()" value="フォーム追加" /> <input type="button" name="back" value="　戻　る　" onClick="location.href='javascript:history.back();'"> </form> <body> <html>

  • MW WP Form　確認画面の遷移について

    以下、ワードプレスのフォーラムにて相談したのですが、専門的過ぎるようでお返事がいただなかった経緯がございまして、こちらでのご相談をさせていただきます。 MW WP Formを便利に使っております。 フォーム入力後の確認画面、完了画面の遷移につきまして教えてください。 フォームをページの下部に設置し、そのページ内で確認、完了画面に遷移させています。 この場合、確認画面、完了画面が表示される際に、その都度ページの上部に戻ってしまい、下方にスクロールしないと確認画面や完了画面が閲覧できない状況になってしまいます。 そこで、ページの下部にフォームを設置した場合でも、確認画面、完了画面への遷移時にページ上部に戻ることなく、ページ下部（フォーム部分）が表示されるようにするための方法を教えていただきたく存じます。 詳しい方がおられましたら、ご助言を賜りたいです。 どうぞよろしくお願いします。

    • 締切済み
    • PHP
  • テキスト入力フォームの値を画面遷移なしで関数に渡す。

    <form>によるテキスト入力フォームに入力されている値を、javascript関数に渡したいと思います。 ページ遷移させずに渡す方法はありますでしょうか？ onclickで関数を呼び出しても、ページが再読込されてしまいます。 <a href="javascript:xxxxxx">で関数を呼び出して、ページ遷移なしで、値を渡すことはできました。 これと同様の効果を、テキスト入力フォームでも行いたいと思っています。 お分かりの方がいらっしゃいましたら、お教え願いたいと思います。 よろしくお願い致します。

  • 複数の画像ボタンから複数の画面に遷移

    javascript、struts初心者です。 画像ボタンAをクリックするとA.doに 画像ボタンBをクリックするとB.doに遷移するようにしたくて、以下のように書いたのですが、動きません。 【JSP】 <html:form action="/chksubmit" method="get"> <html:hidden property="submitdata" value=""/> <html:image src="../image/aaa.gif" onclick="func_submit('aaa')"/> <html:image src="../image/bbb.gif" onclick="func_submit('bbb')"/> </html:form> 【javascript】 function func_submit(id) { submitdata.value = id; } DispatchActionを使って、submitdataの値を見て遷移先を決めるやり方です。 submitdataに値が入ってくれないため、「そんなメソッドがないよ！」とエラーになります。 どうしてsubmitdataに値がはいってくれないのでしょうか？どなたかご教授お願いします。

  • Webの遷移制御をしたいのですが。

    こんばんは。 お手数ですが、首記の件について教えていただけませんか？ *** ＃やりたいこと＃ ＃パターン１＃ 変数Aの値がaの時　=>URL:xxからURL:aaにformデータをURIに送付して遷移 変数Aの値がbの時 =>URL:xxからURL:bbにformデータをURIに送付して遷移 ＃パターン２＃ URL:xxからURL:yyにformデータをURIに送付して遷移 遷移先のURL:yyにて表示データを条件制御して表示 formデータ中の変数Aの値がaの時：aaa.htmlを#includeして表示 formデータ中の変数Aの値がbの時：bbb.htmlを#includeして表示 **** 上記１，２のいずれか、（またはどちらかの趣旨ができるなら別のやり方でも構わないのですが） を実現する方法って無いでしょうか。 javascriptで＃パターン１＃の対応をすると、fire fox,chromeではどうにかうまくいくのですが、 IEでうまくいかずに頓挫しております。 ご助言いただけますと幸いです。 （環境：SSI,javascriptは使用可能という前提でOKです。JSPやPHPがサーバーの設定上使用できないです。Web系は素人なので初歩的な質問かもしれませんが、教えていただけますと幸いです。よろしくお願いいたします。）

    • ベストアンサー
    • HTML
  • 画像のみリロードする方法は？

    PHPで画像を登録するフォームを作成しています。 画面内には画像の登録<INPUT type="file"・・・と別の<FORM>内に複数のテキスト入力項目がありこちらはデーターベースに画像の情報を登録します。 画像をアップロード後、アップロードした画像のみ再表示し事前に入力した項目はそのまま残しておく方法をご存知の方いらっしゃいましたら宜しくお願いします。 <FORM … <INPUT type="text" … (1) <INPUT type="submit" … </FORM> <FORM … <INPUT type="file" … (2) <INPUT type="submit" … </FORM> <IMG src=" … (3) (2)で参照しアップロード後リロードし(3)で画像表示する。 アップロード前に(1)に入力した内容は残しておく。 という感じです。 上手く説明できず分かりにくいとは思いますが宜しくお願いします。

    • ベストアンサー
    • PHP
  • PHPで動的に生成されるcsvの、追加部分のみJavascriptで読み込む方法をご教示下さい。

    PHPとJavaScriptでチャットのようなものを作成しようと思っています。 フォームに入力されsubmitされた文言は、PHPでcsvに書き加えられます。そのcsvをJavaScriptで数秒ごとに読み込み、追加された部分のみを非同期的に表示させるようにしたいです。 全体をリロードするのではなく、動的に生成されていくcsvの追加部分のみを表示させるようなカタチにしたいのですが、どこから手をつければ良いか検討がつきません。 PHPでcsvを生成する部分の作成は独力で可能ですので、JavaScript（Ajax）の部分に関してご教示いただければと思います。 何卒よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する