HTML5 アップロード API の使用例 (パート 2)_html/css_WEB-ITnose

    上一次写了关于HTML的上传API，XMLHttpRequest2.0的上传方式，以及HTML5中上传之前本地的预览，包括对于图片以及部分信息的预览。这次我们就讲下HTML5中关于上传的一些各种个性化需求的处理，主要包括实时进度条，上传速度的实时显示等。

アップロード イベントについて

まず、リアルタイム プログレス バーの要件を達成する必要があります。まず、これらのイベントのほとんどは、XMLHttpRequest オブジェクトの下にあります。

進捗イベント: 進捗イベントをアップロードします。

• load イベント: 転送が正常に完了しました。
• abort イベント: 転送はユーザーによってキャンセルされました。
• エラーイベント: 送信中にエラーが発生しました。
• loadstart イベント: 転送が開始されます。
• loadEnd イベント: 転送は終了しますが、成功したか失敗したかは不明です。
進行状況イベントは、アップロードとダウンロードの 2 つの状況に分けられます。アップロードする場合、進行状況イベントは実際には XMLHttpRequest.upload オブジェクトの下にありますが、ダウンロードする場合、進行状況イベントは XMLHttpRequest オブジェクトに属します

リアルタイム プログレス バーについて

これについては前の記事で説明します のメソッドに基づいて、メソッドはリアルタイムの進行状況バーを書き込むように拡張されています

var xhr=new XMLHttpRequest();  var formData=new FormData();  formData.append('name',"Jack");  formData.append('uid',666666);  xhr.open("post",url);  xhr.send(formData);  //上传中xhr.upload.addEventListener("progress", uploadProgress, false);//上传成功xhr.addEventListener("load", uploadComplete, false);//上传出错xhr.addEventListener("error", uploadFailed, false);//上传取消xhr.addEventListener("abort", uploadCanceled, false);

アップロード イベントでは次のデータも提供されます

合計 – ファイル サイズ

• loaded – アップロードされたサイズ
• lengthComputable – 進行状況が計算可能かどうか
上記のイベントと属性を使用して、進行状況バーを簡単に作成できます。

function uploadProgress(evt){   //evt 上传事件中返回的数据    if (evt.lengthComputable) { //判断进度是否可以计算        var percentComplete = Math.round(evt.loaded * 100 / evt.total); //对进度进行计算并且格式化        document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';     //输出100%    }else {        document.getElementById('progressNumber').innerHTML = 'unable to compute';    }}

上記の方法は、特定の div にパーセント値を直接表示することです。進行状況バーを作成する必要がある場合は、デフォルトの幅 0 のラベルを追加し、幅を動的に変更することができます。 UploadProgress メソッドのラベルの単位はパーセンテージ、値は PercentComplete であるため、アップロード プロセス中に完全な進行状況バーを取得できます。

ファイルがアップロードされた後、load イベントにバインドされた UploadComplete メソッドで CSS などの UI の変更を行うことができます。

リアルタイムのアップロード速度の表示について

現在進行状況バーが表示されていますが、速度がどれくらいなのか、何をすべきなのかを知りたいと思っています。

アップロード速度はprogressイベントでアップロードされたファイルのサイズが分かるので、uploadProgressメソッドで今回と前回の読み込みサイズを1秒以内に計算することでアップロード速度を知ることができます。毎秒。その結果、現在のアップロード速度がページ上でリアルタイムに更新されます。

コードは次のとおりです

// currentLoadedBytesb本次上传的数据总量，// lastLoadedBytes 上一次上传的数据总量// oldObjUploadBits旧的上传速度var currentLoadedBytes,lastLoadedBytes,oldObjUploadBits;timer = setInterval(    function () {        var bytesCount = currentLoadedBytes - lastLoadedBytes;        if (bytesCount !== 0) {            var speed = ConvertBytesUnit(bytesCount);            $(obj).html("上传速度：" + speed.number + speed.unit + "/s");        } else {            $(obj).html(oldObjUploadBits);        }        oldObjUploadBits = $(obj).html();        lastLoadedBytes = currentLoadedBytes;    }, 1000)   function ConvertBytesUnit(size){    if (size < 0) size = 0;    var result = {};    if (size > 1024 * 1024) {        result.number = (size / (1024 * 1024)).toFixed(2);        result.unit = "MB";    } else if (size > 1024 ) {        result.number = (size / 1024).toFixed(2);        result.unit = "KB";    } else {        result.number = size.toFixed(2);        result.unit = "B";    }    return (result);}    

上記の方法を使用すると、1秒あたりの具体的なアップロード速度を取得できます。

さらに、XMLHttpRequest2.0 で実装できる機能は実際には多数あり、さらにブレークポイント再開やマルチパートアップロードなどのより高度な機能も実装できます。それについては次の記事でお話しましょう。