Как отправить ответ вызываемой функции PHP на запрос Ajax? - PullRequest
Новая
       7

Как отправить ответ вызываемой функции PHP на запрос Ajax?

0 голосов
/ 26 сентября 2018

Я отправляю формданные в PHP, используя ajax.upload для загрузки файла в облачное хранилище Google

Javascript: 

 var ajax = new XMLHttpRequest();

//PROGRESS HANDLER
ajax.upload.addEventListener("progress", function(event) {
  var percent = ((event.loaded / event.total) * 100);
  console.log(Math.round(percent) + "% uploading... please wait");
}, false);

//COMPLETE HANDLER
ajax.addEventListener("load", function(event) {
  console.log(event.target.responseText);  
}, false);

//ERROR HANDLER
ajax.addEventListener("error", function(event) {
  console.log("Upload Failed");  
}, false);

//ABORT HANDLER
ajax.addEventListener("abort", function(event) {
  console.log("Upload Aborted");  
}, false);

ajax.open("POST", "api/storage.php");
ajax.send(formdata);

PHP: 

    $_SESSION['storedBytes'] = 0;
    $_SESSION['fileSize'] = $file["size"];

    $uploader = $bucket->getResumableUploader(
      fopen($fileTmpLoc, 'r'),
      [
              'predefinedAcl' => 'publicRead',
              'name' => $_POST['uniqueName'],
              'resumable' => true,
              'chunkSize' => 262144,
              'uploadProgressCallback' => 'uploadProgress'
          ]
    );

    try {
        $object = $uploader->upload();
    } catch (GoogleException $ex) {
        $resumeUri = $uploader->getResumeUri();
        $object = $uploader->resume($resumeUri);
    }

function uploadProgress($storedBytes)
{
    if (isset($_SESSION['storedBytes'])) {
        $_SESSION['storedBytes'] += $storedBytes;
    } else {
        $_SESSION['storedBytes'] = $storedBytes;
    }
    $storedBytes = $_SESSION['storedBytes'];
    $totalSize = $_SESSION['fileSize'];
    $_SESSION['progress'] = ($storedBytes*100)/$totalSize;
    echo "Progress ".$_SESSION['progress'];
}

И яполучить правильное значение прогресса в функции uploadProgress, но как асинхронно отправить это значение в ответ на запрос ajax или как показать прогресс в этой ситуации.

1 Ответ

0 голосов
/ 26 сентября 2018

Я бы использовал обещания в ваших вызовах javascript ajax.Пример jQuery будет выглядеть примерно так: 

// gets the state of the upload from the PHP server.
var getProgress = function(phpUrlForProgress){
    return $.ajax({
        url: phpUrlForProgress,
        type: 'get'
    });
};

var keepCheckingProgress = function(phpUrlForProgress){
    var deferred   = $.Deferred();
    var intervalID = setInterval(function(){
        getProgress(phpUrlForProgress).done(function(response){
            console.log(response); // see what the response looks like.

            // you might need to parse the response into JSON before your if() statement.
            if(response.percentComplete === 100) {// You are done with the upload
                clearInterval(intervalID); // stops the setInterval loop;
                deferred.resolve(response);
            } else {
                // some code to display a progress bar or whatever.
            }
        });
    }, 3000);// setInterval function repeats every 3 seconds until cleared.

    return deferred.promise();     
};

// initiates the upload.
$.ajax({
    url: phpUrlForUpload,
    type: 'post'
    data: formdata
});

// now start checking for upload progress.
var finished = keepCheckingProgress();

$.when(finished).then(function(){
    // do something now that the upload is 100% done
});

Обратите внимание, что у меня не было возможности проверить этот код на наличие ошибок или ошибок, это просто чтобы дать вам представление.

По сути, Promises - это способ привнести некоторый порядок операций в Javascript, который является асинхронным.Это способ сказать, что когда эта задача завершится, выполните какую-то другую задачу.

jQuery Я считаю, что реализация Promise несколько отличается от других библиотек обещаний.Общий учебник по обещаниям можно найти здесь .

...