PR TIMESデザイナー&エンジニアブログ BREAK TIMES

PR TIMES Developer Blog(デザイナー&エンジニアによる開発者ブログ)

PR TIMES Developer Blog
デザイナー&エンジニアによる開発者ブログ

$.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

ChromeFirefoxInternet ExplorerOperaSafari
7以上3.5以上10以上12以上対応


mobile

Android Android WebviewFirefox MobileSafari MobileIE Mobile
対応対応1.0以上対応10.0以上


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

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

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

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