How to do cURL php using AJAX to make a live request?

Question

I am currently using this code:

    <form enctype="multipart/form-data" method="post" action="upload_img.php">
    Choose your file here:
    <input name="uploaded_file" type="file"/>
    <input type="submit" value="Upload It"/>
    </form>
    <?
    if( isset($_FILES['uploaded_file']) )
{
    $IMGUR_API_KEY = 'APIKEY';
    $filename = $_FILES['uploaded_file']['tmp_name'];
    $handle = fopen($filename, "r");
    $data = fread($handle, filesize($filename));

    //$data is file data
    $pvars   = array('image' => base64_encode($data), 'key' => $IMGUR_API_KEY);
    #$pvars   = array('key' => $IMGUR_API_KEY);
    $timeout = 30;
    $curl    = curl_init();

    curl_setopt($curl, CURLOPT_URL, 'http://api.imgur.com/2/upload.xml');
    #curl_setopt($curl, CURLOPT_URL, 'http://api.imgur.com/2/gallery.xml');
    curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars);
    $xml = curl_exec($curl);
    $xmlsimple = new SimpleXMLElement($xml);
    echo '<img height="180" src="';
    echo $xmlsimple->links->original;
    echo '">';

    curl_close ($curl);
    }
?>

Which works perfectly fine, but I need to use this as a form separate to insert multiple fields. In the end, all I need to do is make an AJAX cURL request to upload the photo then get the imgur.com url to the direct image. How would I go about making this form a submit that does this via AJAX so I can stay on this page... Any help would be appreciated, it doesn't have to be fully written, but a spark of an idea. I have no clue where I'm going with this sofar.

Thanks, HackyWackee

Answer 1

You could try something like or similar to this:

    <form enctype="multipart/form-data" method="post" action="upload.php" target="my_iframe">
    Choose your file here:
    <input name="uploaded_file" type="file"/>
    <input type="submit" value="Upload It"/>
    </form>
<!-- when the form is submitted, the server response will appear in this iframe -->

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<IFRAME name="my_iframe" SRC="upload.php" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

Then put your php into "upload.php".