Issue on Posting Image to a PHP File

Question

I am trying to capture a highcharts chart and POST it to a PHP file (result.php). I am able to capture image right now but I do not know how to POST captured image to another file. so far I have this code which is returning a PNG image

function postChart(chart) {
        var obj = {},chart;
        obj.svg = chart.getSVG();
        obj.type = 'image/png';
        obj.async = true;
        exportUrl = 'http://export.highcharts.com/';
        $.ajax({
            type: "POST",
            url: exportUrl,
            data: obj,
            cache:false,
            async:true,
            crossDomain:true,
            success: function (data) {
                // How to Send Image to result.php
            },
            error: function(data) {
            }
        });
    } 

and this result.php file as:

<?php
    $content = $_POST['Not Sure What!'];
    echo  $content;

Now can you please let me know what can I put in

success: function (data) {

  // How to Send Result to another Page }, 

to post the image to result.php and how should I modify the result.php. Thanks

Answer 1

You can just use the highchart's exportChart API Like

function postChart(chart) {
    chart.exportChart({
                       url : 'path/to/result.php',
                       type: 'image/png',
                       filename: 'my-chart'
                     });
} 

Then from result.php you will be able to access the $_POST variable. which will contain following array, where $_POST['svg'] is the image in svg format.

array (
  'filename' => 'my-chart',
  'type' => 'image/png',
  'width' => '0',
  'scale' => '2',
  'svg' => '',
)

You can then use the highchart's server side script to convert the image from svg to your desired format.

If you do not like to use java library for the conversion, you can also try this

Happy Coding!!

Answer 2

This works only if your php-script is somewhere on http://export.highcharts.com/

(Because you set the crossDomain property to true )

In your ajax method:

Change:

data: obj,

TO:

data: {
 objName: obj,
}

Then in the result.php:

<?php
    var_dump($_FILES['objName']);
    // If you're interested, what else is inside $_FILES
    var_dump($_FILES);

Answer 3

Not entirely sure what you're asking. This may be of some help though.

When working with files on upload use $_FILES . Its exactly like $_POST but for files.

Theres a selection of variables you can gather from the file using $_FILES .

<? 
$tempname = $_FILES['file']['tmp_name'];
$filetype = $_FILES["file"]["type"];
$filesize = $_FILES['file']['size'];
?>

In the case above this references the file with a name of "file".