ブレークポイント再開を実装するための HTML5 ファイル API の詳細な紹介

現在、市場に出回っているほとんどの Web サイトでは、ブレークポイント アップロードのためにブラウザ プラグインをインストールする必要があります。この記事では、高度なブラウザ環境 で HTML5 ファイル

api

を使用してブレークポイント アップロードを実装し、複数のファイル選択を実現する方法について説明します。

HTML5 の には、ファイルアップロードフィールド

<input type="file" multiple="multiple" name="file" id="file">

の複数の値を受け入れることができる「multiple」属性が追加されました。この属性を追加した後、ユーザーはポップアップダイアログボックスでそれを選択できます複数のファイルを同時に処理します

次に、コンピューターから Web ページへのファイルのドラッグを実装し、ファイル キュー関数を追加します

ここでは、ドラッグオーバー イベントとドロップ イベントを使用してファイル ドラッグ機能を管理します

ドラッグオーバーは、次のイベントを処理するために使用されます。ここでは、ページ上でファイルをドラッグするイベントを処理するためにドラッグオーバー時間をバインドします

document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
}

このとき、ユーザーはマウスを放したときのイベントを処理する必要があります。ファイルは後続の処理のためにアップロード キューに追加されます

document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 // dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
 // 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
 var files = evt.dataTransfer.files;
 // addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
 // 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
 addfile(files);
}

3. ファイル再開の原則

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

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

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

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

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

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

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

HTML5 File API を使用すると、ファイルの切り取りが想像よりもはるかに簡単になります。

sliceメソッドを使うだけ

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

• 
  

パラメータのstartはスライスの開始位置、endはスライスの終了位置です。単位はすべてバイトです。開始と終了を制御することで、

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

などのファイルの分割

を実現できます。 5. ファイルフラグメントのアップロード

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

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

textpop-up

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);

• 
  

以上がブレークポイント再開を実装するための HTML5 ファイル API の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。