Catch Return Xmlhttprequest send

Question

Good afternoon, I am using the following code to upload images:

   function uploadImage($form){
        $form.find('.progress-bar')
            .removeClass('progress-bar-success')
            .removeClass('progress-bar-danger');
    var formdata = new FormData($form[0]); //formelement
    var request = new XMLHttpRequest();

    //progress event...
    request.upload.addEventListener('progress',function(e){
        $('.progress').removeClass('hidden');
        var percent = Math.round(e.loaded/e.total * 100);
        $form.find('.progress-bar').width(percent+'%').html(percent+'%');
    });

    //progress completed load event
    request.addEventListener('load',function(e){
        $('.progress').removeClass('active');
        $form.find('.progress-bar').addClass('progress-bar-success').html('Upload completo');
    });

    request.open('post', 'server.php');
    request.send(formdata);

}

the file server.php contains:

<?php
    foreach ($_FILES as $name => $file) {

        $tmp_file = $file['tmp_name'];
        $filename = $file['name'];

        move_uploaded_file($tmp_file, 'uploads_folder/'. $name.$_POST['categoria_nome'].'.jpg');
    }
    return true;
? >

I wonder how I get the return of the archive server.php in the upload function?

Answer 1

You need to add another event receiver for changes in the ready state.

Example:

request.onreadystatechange = function () {
    if (request.readyState < 4)                             // está à espera de resposta
        console.log('A carregar...');
    else if (request.readyState === 4) {                    // 4 = A resposta do servidor está carregada
        if (request.status == 200 && request.status < 300)  // http status entre 200 e 299 quer dizer sucesso
            alert(request.responseText);                    // ou usa o xhr.responseText de outra maneira
    }
}

or using request.addEventListener('readystatechange ', function(){ // etc...

To pass server results to the client you can use so:

echo '{"done": true, "message": "hello world!"}';

and in Javascript

var resObject = JSON.parse(request.responseText);

and then you do alert(resObject.message); will give "hello wordl!"

You can also use in PHP json_encode(array);, but if it is little thing it can be more practical as I put up.