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

解決済

質問者：yo14317
質問日時：2008/12/11 13:12
回答数：2件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： yyr446
回答日時：2008/12/11 14:29

情報が不足しているので、どの部分がうまくいかないのかがわらりません。

下記のようなページがあって
<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
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>

複数の人が使うことを前提にしています。このページを見ているときに他人がアップロードした場合に更新をしなくても自動で更新されるようにしたいと考えています。

補足日時：2008/12/11 19:34

通報する

- 0
- 件

通報する

No.2ベストアンサー

回答者： yyr446
回答日時：2008/12/12 14:16

＜＝このページを見ているときに他人がアップロードした場合に更新をしなくても自動で更新されるようにしたいと考えています。

＝＞

　php側でタイマー見たいな物をセットして、定期的に更新をチェックする
にしても、自動でページを更新するのは困難かも、一歩譲って、自動でリ
ロードさせるにしても、私はそんなページは嫌いです。

本件とは話がずれますが、何もしなくても勝手に、どんどんロードして
画像が変わったり、ページが遷移していくサイト（エロサイトに多い）
がありますが、迷惑に感じるのは私だけでしょうか？。