How to send data from PHP to HTML

Question

Is there any way to send data from php to html without refreshing page.

1. i open html to upload images..
2. so i will go to process.php and i got target-path of that images when it has success uploaded.
3. my problem is. how can i send that target-path to my html back without refreshing page.

This is my javascript:

    function startUpload(){
    ..
    return true;
    }
    function stopUpload(success){
    var result = '';
    if (success == 1){
    .. //get data from php
    } else {
    ..
    }
    return true;
    }

process.php

$destination_path = "../dir/";

$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);

if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
    $result = 1;
//$target-path need to send to input in html
}
   sleep(1);

Answer 1

If your Javascript will handle upload event through AJAX. you can return back correct image url and append back to your webpage.

Try this before add jquery to your html page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Html Form:

<span id="returnImage"></span>
<form id="uploadImage">
<label id="img">Upload Image<label>
<input name="images" type="file" class="img"/>
<input type="submit"/>
</form>

JS:

$("#uploadImage").submit(function(e){
  e.preventDefault();
  var data = new FormData();
  $.each($('.img'), function(i, obj) {
    $.each(obj.files,function(j, file){
      data.append('upload_files['+i+']', file);
    });
  });
  $.ajax({
    type: 'post',
    data: data,
    url: "image_processor.php",
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
    var dataArray = $.parseJSON(data);
        $("#returnImage").html('<img src="'+dataArray["img"]+'"/>')
    }); 
  });
});

image_processor.php

<?php
        $array_add_counter = 0;
        foreach ($_FILES['upload_files']['name'] as $imageNameArray){
            $NewImage[$array_add_counter]['name'] = $imageNameArray;
            $array_add_counter++;
        }
        $array_add_counter = 0;
        foreach ($_FILES['upload_files']['type'] as $imageTypeArray){
            $NewImage[$array_add_counter]['type'] = $imageTypeArray;
            $array_add_counter++;
        }
        $array_add_counter = 0;
        foreach ($_FILES['upload_files']['tmp_name'] as $imageTmpArray){
            $NewImage[$array_add_counter]['tmp_name'] = $imageTmpArray;
            $array_add_counter++;
        }
        $array_add_counter = 0;
        foreach ($_FILES['upload_files']['error'] as $imageErrorArray){
            $NewImage[$array_add_counter]['error'] = $imageErrorArray;
            $array_add_counter++;
        }
        $array_add_counter = 0;
        foreach ($_FILES['upload_files']['size'] as $imageSizeArray){
            $NewImage[$array_add_counter]['size'] = $imageSizeArray;
            $array_add_counter++;
        }
        foreach ($NewImage as $images) {
           move_uploaded_file($images["tmp_name"], "ImageLocation/".$images["name"]);
           $return['img'] = "ImageLocation/".$images["name"];

        }
        echo json_encode($return);
?>

I tested and it work in my localhost.

Answer 2

My suggestion would be ajax. It's cleaner and efficient. Example is how you parse the data

This is for HTML to PHP

$('#submit').click(function()
{
    $.ajax({
        url: send_email.php,
        type:'POST',
        data:
        {
            email: email_address,
            message: message
        },
        success: function(msg)
        {
            alert('Email Sent');
        }               
    });
});

If you want to pass a value from PHP to HTML An example would be :

<?php
if( isset($_GET['submit']) )
{
    //be sure to validate and clean your variables
    $val1 = htmlentities($_GET['val1']);
    $val2 = htmlentities($_GET['val2']);

    //then you can use them in a PHP function. 
    $result = myFunction($val1, $val2);
}
?>

<?php if( isset($result) ) echo $result; //print the result above the form ?>

<form action="" method="get">
    Inserisci number1: 
    <input type="text" name="val1" id="val1"></input>

    <?php echo "ciaoooo"; ?>

    <br></br>
    Inserisci number2:
    <input type="text" name="val2" id="val2"></input>

    <br></br>

    <input type="submit" name="submit" value="send"></input>
</form>

In your case it would be :

$destination_path = "../dir/";

$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);

if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
    $result = 1;
   $val1 = htmlentities($_GET['val1']);  // this value could be obtain via HTML
}
   sleep(1);