ホームページ  >  記事  >  バックエンド開発  >  PHP ファイルのアップロードの進行状況バーは、セッションと Javascript_PHP チュートリアルに基づいて実装されています

PHP ファイルのアップロードの進行状況バーは、セッションと Javascript_PHP チュートリアルに基づいて実装されています

WBOY
WBOYオリジナル
2016-07-13 10:48:48851ブラウズ

5.4 より前の php を使用している場合は、ajax、iframe、またはその他の方法でのみ実現できます。php5.4 を使用している場合は、session.upload_progress を使用して js とすばやく組み合わせて、ファイル アップロードの進行状況バーを実装できます。


以下では、PHP 5.4 の新しい session.upload_progress 機能について詳しく紹介します。

原理紹介
ブラウザがサーバーにファイルをアップロードすると、PHP はファイルアップロードの詳細情報 (アップロード時間、アップロードの進行状況など) をセッションに保存します。その後、アップロードが進行するにつれて、セッション内の情報が定期的に更新されます。このようにして、ブラウザは Ajax を使用してサーバー側スクリプトを定期的にリクエストし、スクリプトはセッション内の進行状況情報を返します。ブラウザ側 JavaScript はこの情報に基づいて進行状況バーを表示/更新できます。

それでは、ファイルのアップロード情報はどのように保存されるのでしょうか?どうやってアクセスするのでしょうか?以下で詳しく説明しましょう。

一部の設定項目は PHP 5.4 で導入されました (php.ini で設定)

session.upload_progress.enabled = "1"
session.upload_progress.cleanup = "1"
session.upload_progress.prefix = "upload_progress_"
session.upload_progress.name = "PHP_SESSION_UPLOAD_PROGRESS"
session.upload_progress.freq = "1%"
session.upload_progress.min_freq = "1"
このうち、enabled は、upload_progress 関数を有効にするかどうかを制御します。デフォルトで有効になります。クリーンアップは、ファイルのアップロード要求が送信された後にセッション関連の情報をクリアするかどうかを設定します。これはデフォルトで有効になります。

prefix と name は、セッションに保存される進行状況情報の変数名/キー名を設定するために使用されます。これら 2 つのアイテムの詳しい使用方法については、以下を参照してください。

freq と min_freq は、サーバー側で進捗情報を更新する頻度を設定するために使用されます。これら 2 つの項目を適切に設定すると、サーバーの負荷を軽減できます。

ファイルをアップロードするためのフォームでは、このアップロードの識別子を設定し、この識別子を使用して後続のプロセスで進捗情報を参照する必要があります。具体的には、アップロード フォームに非表示の入力が必要です。その name 属性は php.ini の session.upload_progress.name の値であり、その値は自分で定義した識別子です。以下の通り:

name=""
value="テスト" />
ファイルアップロードフォームを受信した後、PHP は $_SESSION 変数に新しいキーを作成します。キー名は、session.upload_progress.prefix の値と上記のカスタム識別子を連結することによって取得される文字列です。

$name = ini_get('session.upload_progress.name');
$key = ini_get('session.upload_progress.prefix') $_POST[$name];

$_SESSION[$key]; // このファイルのアップロードの進行状況を示します
変数 $_SESSION[$key] の構造は次のとおりです:

$_SESSION["upload_progress_test"] = array(
"start_time" => 1234567890, // 開始時間
"content_length" => 57343257, // POSTリクエストの合計データ長
"bytes_processed" => 453489, // 受信データ長
"Done" = & gt; false, // リクエストが完了したかどうか、False は完了していません

//単一ファイルの情報
"ファイル" => 配列(
0 => 配列( ... ),
// 同じリクエストに複数のファイルを含めることができます
1 => 配列( ... ),
)
);このようにして、content_length と bytes_processed の 2 つの項目を使用して、進行状況のパーセンテージを取得できます。

プログラム例
原理を紹介したので、PHP と Javascript に基づいてファイル アップロードの進行状況バーを完全に実装してみましょう。

この例のコード リポジトリ: Github: pureweber/samples/php-upload-progress

フォームをアップロード
まず、アップロードフォームページのindex.phpを書きましょう。コードは次のとおりです:

action="upload.php" method="POST" enctype="multipart/form-data"
Style="margin:15px 0" target="hidden_​​iframe">


                                                                                                                                                                                                                         

フォーム内の非表示項目 session.upload_progress.name に注目してください。値は test に設定されています。フォームにはファイル アップロードの入力が 1 つだけありますが、必要に応じて複数追加できます。

ここでのフォームの target 属性には特別な注意を払う必要があります。ここでの設定は現在のページの iframe を指します。これは重要です。target 属性を設定すると、フォームが送信された後のページが iframe に表示され、現在のページへのジャンプが回避されます。現在のページに進行状況バーを表示する必要があるためです。

#progress この div は、進行状況バーを表示するために使用されます。

注:index.php の先頭に session_start() を追加することを忘れないでください。

アップロードされたファイルを処理する

フォームのアクションは、upload.php を指します。upload.php でアップロードされたファイルを処理し、現在のディレクトリに転送します。通常のアップロード処理と変わりはありません。

if(is_uploaded_file($_FILES['file1']['tmp_name'])){

move_uploaded_file($_FILES['file1']['tmp_name'], "./{$_FILES['file1']['name']}");
}
?>Ajax で進捗情報を取得します
このステップが重要です。セッションの進行状況情報を読み取るために progress.php ファイルを作成し、index.php に Javascript コードを追加し、progress.php への Ajax リクエストを開始して、そのファイルを更新します。進行状況情報を取得しました。

progress.phpのコードは以下の通りです:

session_start();

$i = ini_get('session.upload_progress.name');

$key = ini_get("session.upload_progress.prefix") . $_GET[$i];

if (!empty($_SESSION[$key])) {

$current = $_SESSION[$key]["bytes_processed"];
$total = $_SESSION[$key]["content_length"];
エコー $current }その他{
エコー100;
}
?>ここでは、$_SESSION 変数内の進行状況情報を取得し、進行状況のパーセンテージを出力します。

index.php で、ページの下部に次のコードを追加します (簡単にするために、ここでは jQuery を使用します):

関数 fetch_progress(){

$.get('progress.php',{ '' : 'test'}, function(data){
var progress = parseInt(data);

$('#progress .label').html(progress + '%');

$('#progress .bar').css('width', progress + '%');

setTimeout('fetch_progress()', 100);

}その他{
$('#progress .label').html('完了!');
}
}, 'html');
}

$('#upload-form').submit(function(){

$('#progress').show();

setTimeout('fetch_progress()', 100);
});
#upload-form が送信されると、進行状況バーが表示され、fetch_progress() を繰り返し呼び出して進行状況情報を取得し、ファイルがアップロードされて「Complete!」が表示されるまで進行状況バーを更新します。

完了!

完全なコードについては、Github: pureweber/samples/php-upload-progress を参照してください

メモ

inputタグの位置

session.upload_progress.name という名前の input タグは、ファイル input の前に配置する必要があります。

アップロードをキャンセル

$_SESSION[$key]['cancel_upload'] = true に設定すると、現在のアップロードをキャンセルできます。ただし、キャンセルできるのはアップロード中のファイルおよびまだ開始されていないファイルのみです。正常にアップロードされたファイルは削除されません。


setTimeout と setInterval

fetch_progress() は、次のリクエストを開始する前に 1 つのリクエストが返されるように、setTimeout() を通じて呼び出す必要があります。 setInterval() を使用する場合、これは保証できず、進行状況バーが「前方ではなく後方」に表示される可能性があります。


www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/632766.html技術記事 5.4 より前の php を使用している場合は、ajax、iframe、またはその他の方法でのみ実現できます。php5.4 を使用している場合は、session.upload_progress を使用して js 実装をすばやく組み合わせることができます...
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。