ファイルのアップロードを再開するブレークポイントを実装する HTML5 メソッド

HTML5のFILE APIにはBLOBオブジェクトを分割できるsliceメソッドがあります。フロントエンドは FileList オブジェクトを通じて対応するファイルを取得し、指定された分割方法に従って大きなファイルをセグメントに分割し、それを 1 つずつバックエンドに渡し、バックエンドはファイルを 1 つずつ順番につなぎ合わせます。

アップロード再開の原則

現在、アップロードを再開するには 2 つの方法が一般的に使用されています。1 つは WebSocket インターフェースを介してファイルをアップロードする方法で、もう 1 つは Ajax を使用する方法ですが、WebSocket はそれをリッスンします。よりハイエンドに見えますが、異なるプロトコルを使用することを除けば、他のアルゴリズムは基本的に非常に似ており、サーバーは ws インターフェイスを開く必要があります。ここでは、ブレークポイント アップロードの概念を説明するために、比較的便利な ajax が使用されています。

結局のところ、ブレークポイント再開アップロードの中心的な内容は、ファイルを「スライス」して、それを少しずつサーバーに転送することですが、この一見単純なアップロードプロセスには無数の落とし穴があります。

最初に行うことは、ファイルがいくつかの部分に分割された後、どのようにしてサーバーに何個の部分を切り取ったかを伝える方法、そしてサーバーがアップロードしたファイルを最終的にどのように結合するか、これらすべてを考慮する必要があります。

そのため、ファイルのアップロードを開始する前に、サーバーとの「ハンドシェイク」プロセスを実行し、サーバーにファイル情報を伝え、サーバーとの合意に達した後、スライスのサイズについて合意する必要があります。サーバーにアクセスすると、後続のファイル転送を開始できます。

成功したら、フロントエンドとバックエンドの両方を後続のブレークポイント用にマークする必要があります。

ファイル転送が中断され、ユーザーがファイルを再度選択すると、ロゴを使用してファイルの一部がアップロードされたかどうかを判断できます。アップロードされている場合は、最後の進行状況に従ってファイルのアップロードを続行できます。アップロードを再開する機能を実現します。

ファイルのフロントエンドスライス

HTML5 File API を使用すると、ファイルのカットは想像よりもはるかに簡単です。

sliceメソッドを使うだけです

var packet = file.slice(start, end);

パラメータstartはスライスの開始位置、endはスライスの終了位置です。単位はすべてバイトです。開始と終了を制御することで、ファイルの分割を実現できます

例:

file.slice(0,1000); 
file.slice(1000,2000); 
file.slice(2000,3000); 
// ......

ファイルフラグメントのアップロード

前のパートでは、スライスメソッドを通じてファイルをいくつかのチャンクに分割しました。 do next 唯一のことは、これらのフラグメントをサーバーに転送することです。

ここでは、ajax post request を使用して

var xhr = new XMLHttpRequest(); 
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理 
xhr.open('POST', url, true); 
xhr.onload = function (e){ 
     // 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快 
} 
xhr.upload.onprogress = function(e){ 
     // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度 
     // e.loaded  该片文件上传了多少 
     // e.totalSize 该片文件的总共大小 
} 
xhr.send(packet);

ファイルがバックグラウンドにアップロードされた後、PHP などのバックグラウンド プログラムがそれを適切に処理します。

上記は、ファイル ブレークポイント再開を実装するための HTML5 メソッドの内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) を参照してください。