履歴書転送の原則は何ですか？ html5 を使用してファイルのアップロードをブレークポイントで再開する方法

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

アップロード再開の原則

アップロードを再開するには、現在 2 つの方法が一般的に使用されています。1 つは WebSocket インターフェース を介してファイルをアップロードする方法で、もう 1 つは Ajax を介してアップロードする方法ですが、WebSocket の方が優れているように思えます。 -end ですが、異なるプロトコルを使用することを除けば、他のアルゴリズムは基本的に非常に似ており、サーバーは 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); 
// ......

ファイルの断片のアップロード

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

ここでは、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 サイトの他の関連記事を参照してください。