使用Ajax将图像上传到imgur

Question

I'm trying to load an image from imgur on the same page, without reloading. I used ajax to perform that.

I tried doing it without ajax , and it works fine, but it reloads the page. So I added the following ajax code, and now the image doesn't load at all. What am I doing wrong, and how can I fix it?

 $(document).ready(function() { function onsuccess(response, status) { $("#onsuccessmsg").html("Status :<b>" + status + '</b><br><br>Response Data :<div id="msg" style="border:5px solid #CCC;padding:15px;">' + response + '</div>'); } $("#uploadform").on('submit', function() { var options = { url: $(this).attr("action"), success: onsuccess }; $(this).ajaxSubmit(options); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://malsup.github.io/jquery.form.js"></script> <form action="upload.php" method="POST" enctype="multipart/form-data" id="uploadform"> <input type="file" name="img" /> <input type="submit" name="submit" value="Upload" /> <br/> <br/>Message : <div id="onsuccessmsg" style="border:5px solid #CCC;padding:15px;"></div> </form> 

Here's the php code:

upload.php

<?php
$img=$_FILES['img'];
if(isset($_POST['submit'])){ 
    if($img['name']==''){  
        echo "<h2>An Image Please.</h2>";
    }else{
        $filename = $img['tmp_name'];
        $client_id="my-id";
        $handle = fopen($filename, "r");
        $data = fread($handle, filesize($filename));
        $pvars   = array('image' => base64_encode($data));
        $timeout = 30;
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_URL, 'https://api.imgur.com/3/image.json');
        curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
        curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $client_id));
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars);
        $out = curl_exec($curl);
        curl_close ($curl);
        $pms = json_decode($out,true);
        $url=$pms['data']['link'];
        if($url!=""){
            echo "<h2>Uploaded Without Any Problem</h2>";
            echo "<img src='$url'/>";
        }else{
            echo "<h2>There's a Problem</h2>";
            echo $pms['data']['error'];  
        } 
    }
}
?>

Update

Here's an image of: AJAX request / response

Answer 1

<?php
if(!@$_SERVER['HTTP_REFERER']) die('No direct Access');
$img=$_FILES['img'];
    if($img['name']==''){  
        echo "<h2>An Image Please.</h2>";
    }else{
        $filename = $img['tmp_name'];
        $client_id="my-id";
        $handle = fopen($filename, "r");
        $data = fread($handle, filesize($filename));
        $pvars   = array('image' => base64_encode($data));
        $timeout = 30;
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_URL, 'https://api.imgur.com/3/image.json');
        curl_setopt($curl, CURLOPT_TIMEOUT, $timeout);
        curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $client_id));
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $pvars);
        $out = curl_exec($curl);
        curl_close ($curl);
        $pms = json_decode($out,true);
        $url=$pms['data']['link'];
        if($url!=""){
            echo "<h2>Uploaded Without Any Problem</h2>";
            echo "<img src='$url'/>";
        }else{
            echo "<h2>There's a Problem</h2>";
            echo $pms['data']['error'];  
        } 
    }
?>

you dont need

if(isset($_POST['submit']))

in upload.php