How to get JS variable value on one page passed back to another page

Hello All,

I currently have two pages coded in php one page is called upload.php and the other page is called processing.php.

in the processing.php I currently have some Javascript that is ran it’s purpose is to check a log file for a video encoding progress to get the percentage left. this variable is called “progress” I need to be able to get this value back to my upload.php page so that I can dynamically update a progress bar with its current value.

I have included some of the JS code on my upload.php that gets the file upload progress this works fine. I just need to report the encoding progress back to this page,

$("form").submit(function() {

  var $el = $("#loadingModal");

     $form = $(this);

     uploadVideo($form, $el);

function uploadVideo($form, $el){
  var formdata = new FormData($form[0]); //formelement

  var ajax= new XMLHttpRequest();

  ajax.upload.addEventListener("progress", function(event){
    var percent = Math.round(event.loaded / * 100;



  //progress completed load event

  ajax.addEventListener("load", function(event){
    $el.find('#progressBarUpload').addClass('progress-bar bg-success').html('Upload completed...');


  ajax.addEventListener("error", function(event){
    $el.find('#status').innerhtml = "Upload Failed";


  ajax.addEventListener("abort", function(event){
    $el.find('#status').innerhtml = "Upload Aborted";


"POST", "processing.php");


below is the JS code on my processing.php page

    var _progress = function(i){
        var logfile = 'uploads/videos/logs/output.txt';

        /* (example requires dojo) */

        $.post(logfile).then( function(content){
// AJAX success
                var duration = 0, time = 0, progress = 0;
                var resArr = [];

                // get duration of source
                var matches = (content) ? content.match(/Duration: (.*?), start:/) : [];
                if( matches.length>0 ){
                    var rawDuration = matches[1];
                    // convert rawDuration from 00:00:00.00 to seconds.
                    var ar = rawDuration.split(":").reverse();
                    duration = parseFloat(ar[0]);
                    if (ar[1]) duration += parseInt(ar[1]) * 60;
                    if (ar[2]) duration += parseInt(ar[2]) * 60 * 60;

                    // get the time
                    matches = content.match(/time=(.*?) bitrate/g);
                    console.log( matches );

                    if( matches.length>0 ){
                        var rawTime = matches.pop();
                        // needed if there is more than one match
                        if ($.isArray(rawTime)){
                            rawTime = rawTime.pop().replace('time=','').replace(' bitrate','');
                        } else {
                            rawTime = rawTime.replace('time=','').replace(' bitrate','');

                        // convert rawTime from 00:00:00.00 to seconds.
                        ar = rawTime.split(":").reverse();
                        time = parseFloat(ar[0]);
                        if (ar[1]) time += parseInt(ar[1]) * 60;
                        if (ar[2]) time += parseInt(ar[2]) * 60 * 60;

                        //calculate the progress
                        progress = Math.round((time/duration) * 100);

                    resArr['status'] = 200;
                    resArr['duration'] = duration;
                    resArr['current']  = time;
                    resArr['progress'] = progress;


                    /* UPDATE YOUR PROGRESSBAR HERE with above values ... */
                        $("#progressBarconvert").addClass('progress-bar bg-success').html('Conversion Completed...');

                    if(progress==0 && i>20){
                        //TODO err - giving up after 8 sec. no progress - handle progress errors here
                        console.log('{"status":-400, "error":"there is no progress while we tried to encode the video" }');
                    } else if(progress<100){

                        setTimeout(function(){ _progress(i); }, 400);
                } else if( content.indexOf('Permission denied') > -1) {
                    // TODO - err - ffmpeg is not executable ...
                    console.log('{"status":-400, "error":"ffmpeg : Permission denied, either for ffmpeg or upload location ..." }');
// AJAX error
                    // retry
                    setTimeout(function(){ _progress(0); }, 400);
                } else {
                    console.log('{"status":-400, "error":"there is no progress while we tried to encode the video" }');
                    console.log( err );

    setTimeout(function(){ _progress(0); }, 800);

Many thanks for your help all

Try searching for:

php session javascript

There are many examples to choose. Try a simple two PHP page test and ensure that is working before trying to add sessions to your pages,

Is this going to work at all? In my head I see that the processing.php script is running on the server, so the JS included in it won’t work there. If the JS is somehow running on the client, how will it access the log file that’s located on the server?

I thought that when you use Ajax to call a PHP script, all the output from that PHP script, whether echo() or just by breaking in and out of PHP, is passed back to the calling code for processing. So that would surely mean that the JS in processing.php does nothing until it comes back to upload.php.

Or am I confusing Ajax and JQuery?

I’d imagine you’d need a timer in upload.php, that would call a separate PHP script, the PHP script would interrogate the log file, and retrieve the required information to then post back into the progress bar or whatever you’re using to update things. But that’s a guess.

Thanks all, I will do some testing and report back as to how I solved this…if I do.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.