개요

처리 구성 (간결하게)

데이터 삽입 조건

삽입 중 화면 상태

삽입 후 화면 상태

ajax에서 값 교환 대신 로컬 파일에서 수시로 읽는 형태

진행 상황은 업로드뿐입니까? 조사해도별로 나오지 않습니다.

구현 (실제보다 쉽게 ​​만든 것을 씁니다)

진행 상황까지의 흐름

foreach ($idData as $id) {
    // 進捗率を求める(小数点以下はfloor()で切り捨て)
    $percent = floor($insertedIdCnt / $allIdCnt * 100);

    // ファイルに書込み
    $fp = fopen('percentNow.log', 'w');
    fwrite($fp, $percent);
    fclose($fp);

    // 挿入処理

    // 1ループ10秒止めておく
    sleep(10);
}

var Progress = (function() {
    function Progress(p) {
        this.bar = document.querySelectorAll('#progressBar > .progressBarBody')[0];
        this.p = p;
        this.update();
    }
    Progress.prototype.update = function() {
        this.bar.style.width = this.p + '%';
    }
    Progress.prototype.countup = function(data) {
        if (this.p < 100) {
            this.p = Number(data);
        }
        this.update();
    }
    return Progress;
}());

// 進捗率と進捗バーを更新する部分です
var updateProgress = function(progress) {
    $.ajax('./hogehoge/percent.log', {
        dataType: 'text',
        success: function(data) {
            $('#progress').html('進捗状況: '+data+'%');
                progress.countup(data);
        }
    });
}

// 今回はsubmitが2つあるためclickとボタンのID(#register)で処理します
// 10秒ごとにInsert≒進捗率変更なので1秒ごとに取得すれば十分かなと思いそう設定しています
$('#register').on('click', function() {
    $('#progressArea').html('<div id="progressBar" class="progress"><div class="progressBarBody"></div></div>');
    var progress = new Progress(0);
    $('#progress').html('進捗状況: 0%');
    setInterval(function() {
        updateProgress(progress);
    }, 1000);
});

<!-- 進捗状況表示 -->
<div id="progressVal">
    <span id="progress"></span>
</div>
<div id="progressArea">
</div>

.progress {
  width: 60%;
  height: 30px;
  background-color: #F5F5F5;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.progressBarBody {
  transition: width 0.5s linear;
  height: 100%;
  background-color: #337AB7;
  border-radius: 4px;
}

참고