$.ajaxファイルアップロードでの進捗表示

こんにちは。フロントエンドエンジニアの本間です。　

今日は$.ajaxファイルアップロードでプログレスバー表示についてです。　

UIUXにおいて体感速度を短縮するのは重要で、同じ待ち時間でも進捗表示することによって体感速度が向上します。

さらにプログレスバーの色や模様によっても体感速度が変わってくるという研究結果もでているようです。

gigazine.net

PRTIMESでは企業管理画面のリリース配信登録画面でワードファイルをアップする際に使っています。
　
やり方は$.ajaxの引数にxhrオブジェクトを渡し、progressイベントハンドラで取得します。

$.ajax({
    url  : api.url,
    async: true,
    xhr : function(){
        var XHR = $.ajaxSettings.xhr();
        if(XHR.upload){
            XHR.upload.addEventListener('progress',function(e){
                var progre = parseInt(e.loaded/e.total*100);
                $hoge.css({width: progre+'%'});
            }, false);
        }
        return XHR;
    },
})

簡単ですね。

8行目e.totalがトータルサイズでe.loadedがアップし終わったファイルサイズです。それをパーセントに直して次の行で$hogeの横幅に代入してます。

プログレスバーは必要な時に表示してアップロード後に、消すといった使い方がほとんどだと思いますので、　表示切り替えはbeforeSendとcompleteを使うといいと思います。

生のjavascriptの場合は下記　

var req = new XMLHttpRequest();
req.addEventListener('progress', updateProgress, false);
req.open();

function updateProgress(e) {
    var progre = parseInt(e.loaded/e.total*100);
    document.getElementById(hoge).style.width=progre+'%';
}

非同期前提なのでasyncがfalseだと取得できません。
ですので古いブラウザ対応などでよくやる空のiframeからsubmitしてレスポンスを親に渡すやり方でも取得できませんのでご注意！

ちなみにprogressイベントのブラウザ対応状況は下記です。
　

PC

Chrome	Firefox	Internet Explorer	Opera	Safari
7以上	3.5以上	10以上	12以上	対応

mobile

Android	Android Webview	Firefox Mobile	Safari Mobile	IE Mobile
対応	対応	1.0以上	対応	10.0以上

今回はファイルアップロードでそこまで長くない時間でしたが、時間のかかる処理をする際に楽しげなアニメーションGifを動かしたり、広告スペースに活用したりと工夫してあるサイトも多いですね。

体感時間について下記の記事が面白かったのでご紹介致します。

第46回 体感時間のコントロール | WIRED VISION

待っているという事実を一瞬忘れさせるのが体感時間短縮の鍵ですね。
最後まで読んでいただきありがとうございます。