アップロードの進行状況を追跡する PHP および JavaScript_PHP のチュートリアル

Web 開発者を何年も悩ませてきた問題は、ファイルアップロードの進行状況バーなどのリアルタイム情報をアプリケーションに追加する方法です。ユーザーはせっかちで、ブラウザが何かをしている間、ブラウザがフリーズしたのではないか、接続が遅いのではないかと考えながら座って待ちたくありません。進行状況インジケーターは、ユーザーに有益な情報を提供し、何が起こっているのかを正確に知らせるために提供されます。
これを実現したいと最初に考えられるのは、まずユーザーのコンピュータからファイルのサイズを取得し、次にファイルがアップロードされるディレクトリがあるサーバー上で簡単な計算を実行することによって、簡単に実行できます。 2 番目の考えについては、物事はそれほど単純ではないことがわかります。
JavaScript はファイルの名前、タイプ、さらにはネイティブ画像の幅と高さにアクセスできますが、ファイルのサイズにアクセスできるようになったのは HTML5 になってからです。残念ながら、HTML5 はまだ完全な標準ではなく、すべてのブラウザーに均等に分散されています。別の解決策は、Flash、Java、または ActiveX プラグインに依存することです。いいえ、パスします。ただし、別の解決策は、オプションの PHP キャッシュ拡張機能をインストールすることですが、ホスティング環境によっては、これは非常に小さな作業であり、過剰な作業であるように思えるかもしれません。
すべてのオプションが煩わしいものでいっぱいで、その作業はすぐに頭の痛いものになってしまったように思えます。しかし、ヨーダの言葉を借りれば、「いいえ、それはもう一つです
」。 私が PHP を愛する多くの理由の 1 つは、一見難しいタスクを簡単に実行できることです。 PHP 5.4 では、別の新しい構成命令セット session.upload_progress が作成されました。
この記事では、この機能を使用して、外部ライブラリやブラウザーに依存せずに単純なアップロード進行状況バーを作成する方法を説明します。最初にその仕組みについて説明し、次にタスク (フォーム、JavaScript、CSS をアップロードし、アップロード ステータスとファイルを返す) を完了するために作成する 4 つのファイルについて説明します。
セッションアップロードの進行状況
ファイルのアップロードを許可するための一般的な要件に加えて、進行状況を追跡するための 2 つの要件があります。 session.upload_progress.enabled ディレクティブが有効になっている必要があり、Web フォームで指定する名前には session.upload_progress.name ディレクティブに非表示フィールドが含まれている必要があります。 session.upload_progress.enabled が true (PHP 5.4 のデフォルトと同様、おそらくそれ以降) の場合、アップロードは $_POST [session.upload_progress.name] 中に送信され、ファイル転送情報は $_SESSION スーパーグローバル配列内にあります。
ファイル転送中の $_SESSION 配列の print_r() の出力は次のようになります:

Array
(
    [upload_progress_myForm] => Array
        (
            [start_time] => 1323733740
            [content_length] => 721127769
            [bytes_processed] => 263178326
            [done] =>
            [files] => Array
                (
                    [0] => Array
                        (
                            [field_name] => userfile
                            [name] => ubuntu-10.04.3-desktop-i386.iso
                            [tmp_name] =>
                            [error] => 0
                            [done] =>
                            [start_time] => 1323733740
                            [bytes_processed] => 263178026
                        )
                )
        )
)

当您正在开发本地或快速网络上传小文件，你不会是能够直观地观察到的进展，因为转让发生如此之快。在这种情况下，你可能想尝试传送一个大文件。确保在你的php.ini的设置文件允许上传大，具体的post_max_size 的upload_max_filesize指令，然后确认他们是理智的价值，当你去生产。

创建表单
 
我会提出的第一个文件上传表单。只是为了保持尽可能简单的事情，例如将张贴到自己，一次只能处理一个文件上传。此外，我不会打扰保存文件后，它已上载。
下面是代码form.php：
01
02
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
03
    // move_uploaded_file()
04
}
05
?>
06

07
 

08
 
09
 
10
 
11
 
12
 

13
  

14
 

15
 

16

" メソッド="POST"
17
id="myForm" enctype="multipart/form-data" target="hidden_​​iframe">
18
19
name="">
20


21

22
フォーム>
23

24

25

26

この例のコードで実際に処理されるファイルは、わかりやすくするために省略されています。このようなコードがどのようなものであるかに興味がある場合は、Timothy Boronczyk による記事「Uploading Files with PHP」を参照してください。
ページのタイトルを指定し、ヘッダー セクションにスタイルシートを含めると、div 要素の小さなコレクションが表示されます。 ID「bar_blank」グリッドの進行状況バーのコンテナー。 ID「bar_color」のグリッドは、ファイルのアップロードの進行状況を動的に更新します。 「identity」div には、アップロードされた % 値が表示されます。
フォーム送信を非表示の iframe 要素と同じ URL に設定し、そのターゲット属性ポイントを設定します。フォームを非表示のフレームに送信すると、訪問者のバックグラウンドで作業が行われている間も同じページに留まることができます。実際、JavaScript の XMLHttpRequest オブジェクトを使用してファイルの内容を直接送信することはできないため、これは「Ajax ファイルのアップロード」を行うときによく行われる方法です。
フォームでは、配列 $_SESSION に特別な隠しフィールドを設定して表示し、その後にファイル アップロードの入力および送信ボタンを表示する必要があります。フォームを送信すると、含まれる JavaScript ファイルで定義される startUpload() という JavaScript 関数がトリガーされます。
ページの下部にある非表示のフレーム フォームにより、script.js ファイルが公開およびインポートされます。
スタイリングを追加してください

次のファイルである style.css ファイルは非常に簡単です。プログレスバーコンテナのサイズを定義し、読み込みプログレスバーの色として 1 ピクセルの黒い境界線を付け、iframe とプログレスバーを非表示にします。
01
#bar_blank {
02
境界線: 実線 1px #000;
03
高さ: 20px;
04
幅: 300px;
05
}
06
07
#bar_color {
08
背景色: #006666;
09
高さ: 20px;
10
幅: 0px;
11
}
12
13
#bar_blank、#hidden_​​iframe {
14
ディスプレイ: なし;
15
}

クライアント機能

script.js ファイルは最大のファイル セットです。これには 6 つの主要な機能が含まれており、それについては後で説明します。多くの人が jQuery が提供する機能の一部を使用することを好みます。もちろん、必要に応じて自由に使用できますが、私は個人的には昔ながらのアプローチを好みます。日本が手作り品をより大切にしているのと同じように、私自身だったら、コードの方がもっと好きになると思います。
01
関数 toggleBarVisibility() {
02
var e = document.getElementById("bar_blank");
03
e.style.display = (e.style.display == "ブロック") "なし" : "ブロック";
04
}
05
06
関数 createRequestObject() {
07
var http;
08
If (navigator.appName == "Microsoft Internet Explorer") {
09
http = new ActiveXObject("Microsoft.XMLHTTP");
10
}
11
他に{
12
http = new XMLHttpRequest();
13
}
14
http を返します;
15
}
16
17
関数 sendRequest() {
18
var http = createRequestObject();
19
http.open("GET", "progress.php");
20
http.onreadystatechange = function () { handleResponse(http) };
21
http.send(null);
22
}
23
24
関数ハンドル応答(http) {
25
var 応答;
26
If (http.readyState == 4) {
27
応答 = http.responseText;
28
document.getElementById("bar_color").style.width = 応答 + "%";
29
document.getElementById("status").innerHTML = 応答 + "%";
30
31
if (応答 32
setTimeout("sendRequest()", 1000);
33
}
34
else {
35
toggleBarVisibility();
36
document.getElementById("ステータス").innerHTML = "完了。";
37
}
38
}
39
}
40
41
関数 startUpload() {
42
toggleBarVisibility();
43
setTimeout("sendRequest()", 1000);
44
}
45
46
(関数() {
47
Document.getElementById("myForm").onsubmit = startUpload;
48
})();
toggleBarVisibility() 関数は、「bar_blank」グリッドに適切なスタイルを設定して、進行状況バーを表示または非表示にします。最初は非表示で表示されますが、アップロードが開始されると、アップロードが完了すると再び非表示になります。
createRequestObject() 関数は、ユーザーのブラウザに基づいて XMLHttpRequest または ActiveXObject オブジェクトを作成します。これはおそらく、ほとんどの人が jQuery やその他の JavaScript フレームワークに期待しているものです。
sendRequest() 関数は、progress.php GET リクエスト ファイルを要求し、handleResponse() 関数を呼び出して返されたデータを処理します。
handleResponse() 関数は、progress.php からの応答を処理します。この応答は、ファイルのアップロードの進行状況に応じて 1 ～ 100 の数値になります。また、「ステータス」DIV を適切な値で更新します。現在の%が100未満の場合は、JavaScriptのネイティブsetTimeout()関数を呼び出して、別の更新リクエストの1秒後にこの値を適切に調整します。それ以外の場合は、プログレスバーを再度非表示にして、ステータスを「完了」に設定します。
startUpload() 関数は、更新リクエストを送信した後、1 秒の遅延後にアップロード バーを表示します。このわずかな遅延は、アップロードの開始時間を確保するために必要です。
最後の関数は、startUpload() フォームの送信イベントを登録する自己実行型の匿名関数です。

リアルタイムの進捗状況

すべてをまとめた最後のファイルは、progress.php ファイルです:
01
02
session_start();
03
04
$key = ini_get("session.upload_progress.prefix") "myForm";
05
if (!empty($_SESSION[$key])) {
06
$current = $_SESSION[$key]["bytes_processed"];
07
$total = $_SESSION[$key]["content_length"];
08
エコー $current 09
}
10
他に{
11
エコー100;
12
}

スクリプトは、転送されたバイト数を合計ファイル サイズで割って 100 を掛け、四捨五入してパーセンテージ ポイントを与える簡単な計算を実行します。
転送タイプの詳細については、非表示の session.upload_progress.name フィールドの値と連結された session.upload_progress.prefix ディレクティブの値を参照してください。私のフォームは「myForm」を渡すため、セッションキーはini_get("session.upload_progress.prefix")によって決定されます。 「マイフォーム」。
これはアクションの進行状況バーのスクリーンショットです:

微調整された動作
PHP には、会議アップロードの動作を微調整するために注意すべき追加のディレクティブがいくつか用意されています。たとえば、デフォルトで 1 に設定されている session.upload_progress.cleanup は、クリーンアップの完了直後に追加のセッション データをアップロードします。潜在的な競合状態を避けるために注意する必要があります。
progress.php のコードをもう一度見てみると、続行する前に $_SESSION[$key] が空かどうかを確認していることがわかります。私の JavaScript 関数は、2 番目の progress.php から返される結果が 100 未満である限り起動します。 session.upload_progress.cleanup が有効で、スクリプトがアップロードの 99% を完了し、1 1/2 秒後にアップロードが完了した場合、次のチェックでは $_SESSION[$key] が存在しません。それを考慮していないと、アップロードが完了した後でも JavaScript 関数が起動し続ける可能性があります。
他の 2 つのディレクティブは session.upload_progress.freq と session.upload_progress.min_freq で、どちらもセッションを更新する頻度を決定します。頻度の値は、バイト (つまり 100)、または総バイト数の割合 (つまり 2%) のいずれかになります。 min_freq の値は秒単位で、更新間の最小秒数を表します。明らかに、min_freq が 1 秒ごとに更新される場合、JavaScript を 100 ミリ秒ごとにチェックするのは無意味です。
概要www.2cto.com
これで、会議アップロードの進行状況機能を使用してファイル アップロードの進行状況バーを作成する方法をしっかりと理解できたはずです。今後は、複数のファイルをアップロードしたり、$_SESSION[$ キーを使用してブレインストーミング["cancel_upload",] を使用して進行状況のアップロードをキャンセルしたり、その他の思いついたアイデアを試してみることをお勧めします。あなたの経験や改善点についてコメントしてください。

作者: newcnzz

http://www.bkjia.com/PHPjc/478020.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/478020.html技術記事 Web 開発者を長年悩ませてきた問題の 1 つは、ファイル アップロードの進行状況バーなどのリアルタイム情報をアプリケーションに追加する方法です。ユーザーはせっかちで、ブラウジング中に座って待ちたくないのです…