【PHP+MySQL+JavaScript】


CentOS4.4
PHP4.3.x
MySQL4.x

の環境で、ファイルのアップロード処理を製作しています。

アップロード中、JavaScriptを使用して、
処理の度合いがわかるプログレスバーをつけたいと考えていましたが、
perlの使用も不可でしたので、
http://q.hatena.ne.jp/1176788464
でご回答いただいた処理は不可能でした。

とりあえず、プログレスバーをあきらめるのですが、
大きいファイルをアップロードされたとき、次の画面に遷移するまで、
ブラウザがとまってしまったような感じになるのを避けたいので、
アップロード中に「アップロード中です」というメッセージのみを
出したいと考えています。


しかし、PHP4の場合、

1.フォームからアップロード
  ↓
2.サーバ側での処理
  ↓
3.PHPスクリプト処理

となってしまい、
上記、3番で何を書いても、2番の待機処理が終わってからしか
作業ができないような気がします。

javascriptと組み合わせて、できそうですが、
javascriptをよく知りません。
実現方法をご教授ください。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2007/04/25 08:59:17
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Yota No.1

回答回数453ベストアンサー獲得回数28

ポイント35pt

あらかじめ、HTML内にメッセージやアニメションGIFを埋め込んでく。

<div id="loading" style="display:none">アップロード中です</div>

アップロードボタンがクリックされたら見せる。

<input type="submit" value="upload" onclick="window.document.getElementById('loading').style.display='inline'">

処理が終わったらかくす。

<?php

move_uploaded_file(........);

?>

<script type="text/javascript" >

window.document.getElementById('loading').style.display='none'

</script>

こんなのでどうでしょう。

id:keijiro

ありがとうございます。

試してみます。

うまくいきました。

2007/04/24 21:54:49

その他の回答1件)

id:Yota No.1

回答回数453ベストアンサー獲得回数28ここでベストアンサー

ポイント35pt

あらかじめ、HTML内にメッセージやアニメションGIFを埋め込んでく。

<div id="loading" style="display:none">アップロード中です</div>

アップロードボタンがクリックされたら見せる。

<input type="submit" value="upload" onclick="window.document.getElementById('loading').style.display='inline'">

処理が終わったらかくす。

<?php

move_uploaded_file(........);

?>

<script type="text/javascript" >

window.document.getElementById('loading').style.display='none'

</script>

こんなのでどうでしょう。

id:keijiro

ありがとうございます。

試してみます。

うまくいきました。

2007/04/24 21:54:49
id:ito-yu No.2

回答回数323ベストアンサー獲得回数14

ポイント35pt

POST後のページ(PHP)で出力する物は読み込み中(≒アップロード中)は表示されません。

ということは、POST前のページで表示しなければいけないということです。

javascriptで、formのonsubmit属性で「アップロード中です」と表示させる関数を記述すればOKです。

<head></head>内に追記:

<script type="text/javascript"><!--
function popMsg(msg){
	msgBox = document.getElementById('messageBox');
	msgBox.innerHTML = msg;
	msgBox.style.display = 'block';
}
//--></script>
<style type="text/css"><!--
#messageBox{
	display:none;
	position:absolute;
	top:1em;
	left:1em;
	background-color:#ffcccc;
}
//--></style>

<form>に以下のonsubmit属性を追記:

<form(略) onsubmit="popMsg('アップロード中です');">

<body></body>内の最後に追記:

<div id="messageBox"></div>
id:keijiro

ありがとうございます。

試してみます。

うまくいきました。

2007/04/24 21:54:51

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません