java - Jquery/HTML5/Ajaxアップロード進行状況バー?

Question

私は単純な S3 アップローダに取り組んでおり、実行して必要なことを実行することができました。ただし、アップロードの進行状況バーを簡単に作成できるかどうか疑問に思っていましたか?

ブラウザの下部に、「アップロード中」というブラウザ メッセージがあります。ロード バーを表示するために、これに背を向けていることを知っている記事はありますか?

理想的には、その変数は、ブートストラップ プログレスバー (整数を受け入れる) にパーセンテージをレンダリングする jquery 関数に渡されます。

ここでの目標は、見た目をより美しくすることであり、必ずしも 100% 正確である必要はありません。

Answer 1

XMLHttpRequestオブジェクトを使用している場合は、onprogressイベントとイベントのlenghtcomputable attrを使用できます。これは、XMLHttpRequestがprogressをサポートしている場合にのみ行う必要があります（新しいXMLHttpRequestのtest = "upload"）

var xhr = new XMLHttpRequest();
xhr.open('POST', 'post/picture');
xhr.onload = function() {
   progress.value = progress.innerHTML = 100;
};


xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        var complete = (event.loaded / event.total * 100 | 0);
        progress.value = progress.innerHTML = complete;
    }
}

xhr.send(formData);

Answer 2

jquery UIのプログレスバーを試しましたか？

jQueryプログレスバーのメイン