HTML5 ラージ ファイル ブレークポイントの再開実装方法_html5 チュートリアル スキル

大きなファイルのチャンク化

一般的に使用される Web サーバーには、サーバーにデータを送信するためのサイズ制限があります。特定のサイズを超えるファイルの場合、サーバーは拒否メッセージを返します。もちろん、Web サーバーは、サイズ制限を変更する可能性のある構成ファイルを提供します。 Web サーバーを変更してファイル サイズを制限し、大きなファイルを IIS にアップロードする方法もいくつかあります。ただし、これは Web サーバーのセキュリティに問題を引き起こします。攻撃者は簡単に大きなデータ パケットを送信し、Web サーバーを直接破壊することができます。
大きなファイルをアップロードするための現在の主流の実装方法は、大きなファイルをチャンクに分割することです。たとえば、100M のファイルの場合、2M に従って 50 ブロックに分割します。次に、各ファイルを順番にサーバーにアップロードし、アップロードの完了後にサーバー上のファイルを結合します。
Web 上で大きなファイルのアップロードを実装するために、コアは主にファイルのセグメント化を実装します。 Html5 File API が登場する前は、Web 上でファイル転送をチャンク単位で実装する必要がありました。ファイルのチャンク化は、フラッシュまたは Activex を通じてのみ実現できます。

HTML5 では、ファイルのスライス メソッドを通じてファイルのセグメント化を直接実装できます。例:

XML/HTML コードコンテンツをクリップボードにコピー

1. ファイル.スライス(0,1000);
2. ファイル.スライス(1000,2000);
3. ファイル.スライス(2000,3000);

次に、XMLHttpRequest を通じて非同期でサーバーにアップロードされます。

HTML5 アップロード ファイル クラス ライブラリ

興味があり、時間があれば、もちろん html5 の File API を使用して自分で実装することもできます。インターネット上で HTML5 をサポートする次の 2 つのライブラリを見つけました。
resumable.js git のアドレスを添付します: https://github.com/23/resumable.js
Pludload http://plupload.com/

resumable は純粋な HTML5 アップロードですクラスライブラリ。
Pludload は、HTML5、Flash、Silverlight、HTML4 をサポートしており、ブラウザが HTML5 をサポートしているかどうかを自動的に判断し、他のアップロード方法を使用します。
テストしたところ、再開可能と Pludload の両方が html5 のファイルのチャンクアップロードをサポートしていることがわかりました。使ってみるとレジュームブルの方が適していると感じたので、以下ではレジュームブルを選択して紹介します。

resumable.js ブレークポイント アップロードの使用方法の概要

主な構成の概要:

JavaScript コードコンテンツをクリップボードにコピーします

1. var r = new 再開可能({
2. ターゲット:'/test/upload'、
3. チャンクサイズ:1*1024*1024、
4. 同時アップロード数:4、
5. テストチャンク: true、
6. ThrottleProgressCallbacks:1、
7. メソッド: "オクテット"
8. });

chunkSize チャンク化されたファイルのサイズ (バイト単位)
simultaneousUploads ファイル チャンクを同時にアップロードするプロセスの数。これにより、複数のファイル チャンクを同時にアップロードできます。
testChunks は、ファイルがアップロードされたかどうかを検出するために、前のファイル チャンクが最初に get メソッドを通じてファイル情報を送信する必要があるかどうかを確認します。

再開可能なブレークポイントのアップロードは、true に設定されている場合、testChunks 構成ノードを通じて実装されます。 http ステータスが 200 を返した場合、resumeable は最初に get リクエストを送信します。現在のブロックがアップロードされたとみなされ、次のブロックの取得リクエストが行われます。返された http ステータスが 200 でない場合、現在のブロック データ パケットはファイル ブロック アップロードのポスト モードを通じて送信されます。

testChunks を true に設定すると、最後に中断されたアップロードの前にファイル内のチャンク数がすでにわかっている場合、アップロードごとに get リクエストが追加されます。次回からは中断したブロック番号から直接アップロードするだけです。これにより、ブロックごとに 1 つの http get リクエストが削減されます。
この要件に応えて、再開可能ファイルのソース コードを変更し、再開可能ファイル オブジェクトに startchunkindex 属性を追加しました。デフォルトは 0 です。現在のファイルをアップロードするブロックを設定するために使用されます。この方法では、ファイルをアップロードする前にサーバーからクエリ (現在のファイルがアップロードされているブロックをクエリ) を実行し、最後にアップロードされたファイル ブロック インデックスを返すだけで済みます。次に、ファイルの startchunkindex 属性にインデックス値を設定して、最後に切断されたファイル ブロックからアップロードを開始します。
呼び出しメソッド:

JavaScript コードコンテンツをクリップボードにコピーします

1. //ファイル追加イベントを処理します
2. r.on('fileAdded', function (ファイル) {
3. 。 詳細については、添付ファイルのデモをご覧ください。
作業の終了

すべてのファイル ブロックがアップロードされた後の最後の作業は、ファイルを結合して保存することです。添付ファイルは、簡単なファイル結合機能を含む、再開可能な Upload.net 実装のサーバー例です。 Resumable の git から他の言語のデモをダウンロードすることもできます。
わかりやすくするために、デモの例ではローカル マシンにファイルのみを保存しています。実際の本番環境で。一般に、ファイルは別のファイル サーバーに配置する必要があり (フロントエンド Web は FTP またはフォルダー共有を通じてファイル サーバーにアップロードされます)、アップロードされたファイルは配布、ミラーリング、または処理 (ビデオ圧縮など) される必要があります。もちろん、分散ファイル システムに保存するのが最善です。現時点では、Hadoop 分散ファイル システム (HDFS) に保存するのが良い解決策であるようです。
デモ


Vs2012 Html5 アップロード デモ ダウンロード