このプログラムは、3.x Firefox ブラウザーの機能を使用してローカル ファイルを読み取り、xmlHttPRequest を通じて大きなファイルをアップロードする機能を実現し、アップロード プロセス中にアップロードの進行状況を動的に表示します。ちょっとした変更とサーバーとの連携で、ブレークポイントレジューム送信など多くの機能を実現できます。
この例は主に、クライアント側で大きなファイルのアップロードを実装する際の FireFox のファイル入力ノードのいくつかの機能を学習するためのものであり、データ送信とサーバーの点でこの例とは異なります。・サイド収納も基本的に考え方は同じです。
注: ファイルサイズには臨界点があるようですが、この臨界点が何なのかはまだ確認されていません。 100M を超えるファイルをアップロードする場合は、この方法を使用しないことをお勧めします。
以下はクライアントのJavaScriptコードです
/*
* FireFoxFileSender バージョン 0.0.0.1
* by MK winnie_mk(a)126.com
*
* [このプログラムは FireFox3.x バージョンに限定されており、他のブラウザでの動作はテストされていません。 】
* 【テスト合格: FireFox 3.6.8 / Apache/2.2.11 (Win32) php/5.2.6 】
* ********************** ************************************************* * ******
* このプログラムは、ローカル ファイルを読み取ることができる 3.x FireFox ブラウザの機能を利用します
* xmlhttpRequest を通じて大きなファイルをアップロードする機能を実装します
* アップロード中にアップロードの進行状況を動的に表示しますプロセス
※省略 修正を加えてサーバーと連携することで、ブレークポイントからの再開など多くの機能を実現できます
※ この例は主に FireFox のファイル入力ノードのいくつかの機能を学習するためのものです
※ 他のクライアントアプリケーション、例えば Flash、Silverlight、などでクライアントを実装している 末端で大きなファイルをアップロードする場合
* データ送信とサーバー側のストレージに関しては、考え方は基本的にこの例と同じです
* 注: ファイルサイズが重要な点があるようですが、臨界点はまだ確認されていない。 100M を超えるファイルをアップロードする場合は、この方法を使用しないことをお勧めします。
************************************************ ******************************
*/
function FireFoxFileSender(config){
var conf = config ||
/*
* エラーメッセージキュー
*/
this.errMsg = [];
/*
* すべてのパラメータが完了しているかどうかを判断します
*/
this.f = typeof conf.file == 'string' ?
document . getElementById(conf.file) : conf.file;
if(!this.f){ this.errMsg.push('エラー: 入力ファイルが設定されていません。' }
else if(this.f.files. length < 1){ this.errMsg.push('エラー: ファイルが選択されていません。'); - ( 、代わりに、base64 エンコードされたデータの送信を使用します。
*/
this.data = (this.data = this.f.files[0].getAsDataURL())
.substr(this.data.indexOf(',') + 1);
this .length = this .data.length; conf.url;
if(!this.url){
this.errMsg.push('エラー: バイナリを送信するインスタンス URL が設定されていません。');
}
/*
* 送信パケットのサイズ。デフォルトは 100kb
*/
this.packageSize = conf.packageSize || 102400;
/*
* サーバー側での Base64 エンコードへの変換を確実にするために、送信される各データ パケットのサイズは 4 の倍数である必要があります正しい。
*/
if(this.packageSize % 4 != 0)
this.packageSize = parseInt(this.packageSize / 4) * 4;
this.onSendFinished = conf.onSendFinished || null;
this.onSending = conf .onSending || null;
this.onError = conf.onError || null;
}
FireFoxFileSender.prototype = {
/*
* 現在送信されているデータを記録します
*/
currentData : null,
/*
* 記録位置を読み取ります
*/
Position: 0,
/*
* データサイズ。値はbase64文字列の長さです。
* onError イベントをトリガーします
*/
typeof this.onError XMLHttpRequest を作成します
*/
createSender: function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', this.url , true);
var _ = this;
xhr.onreadystatechange = function(){
* サーバーセグメントが応答した場合 正常であれば、ループで読み込みと送信を行います。
、null; createSender();
*/
xhr.setRequestHeader('#FILE_NAME#', this.fileName);
xhr.setRequestHeader('#FILE_SIZE#', this.length);
xhr.setRequestHeader('#CONTENT_TYPE#', this.contentType);
xhr.send(this.currentData);
} else if(typeof this.onSendFinished == 'function') {
/*
* 触发onSendFinished事件
*/
this.onSendFinished(this);
}
},
/*
* 计算已发送数据百分比
*/
percent : function(){
if(this.length <= 0 ) return -1;
return Math.round((this.position / this.length) * 10000) / 100;
},
onSendFinished : null, //该事件是以本地数据发送完成为触发，并不是服务器端返回的完成信息。
onSending : null,
onError : null
}
/*
* アップロード ボタン イベント
*/
function send(fileID){
var sender = new FireFoxFileSender(
/*
* 入力ファイル要素。dom ノードにすることもできます。id の文字列値にすることもできます
url : 'UPLOADER.php'、
/*
データ パケットのサイズは、IIS6 の場合は 200K です */
すべて準備完了、送信エラーはありません。プロセスは、送信プロセス中にトリガーされます。 (PARSEINT (PER) == 100) {alert ('サーバー受信完了');}},
/ *
* このインシデントは [ローカル データ送信] 時にトリガーされます。
READYSTATE== 4およびステータス== 200。 */
$b64 = file_get_contents("php://input");
/*
* ヘッダー情報を取得します
*/
$headers = getallheaders ();
$fileName = $headers['#FILE_NAME#'];
$contentType = $headers['#CONTENT_TYPE#'];
/*
* いくつかの判断とプロセスを作成してください...
*/
/*
* 以下は、データ送信に対するサーバーからの簡単な応答です
* - データが投稿される場合は、base64 をバイナリ ストリームに変換した後のバイナリ ストリームの長さを出力します
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
