title: Upload image to imgur using ajax
body: <p>I'm trying to load an image from imgur on the same page, without reloading. I used <code>ajax</code> to perform that.</p>
  
  <p>I tried doing it without <code>ajax</code>, 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?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    function onsuccess(response, status) {
      $("#onsuccessmsg").html("Status :&lt;b&gt;" + status + '&lt;/b&gt;&lt;br&gt;&lt;br&gt;Response Data :&lt;div id="msg" style="border:5px solid #CCC;padding:15px;"&gt;' + response + '&lt;/div&gt;');
    }
    $("#uploadform").on('submit', function() {
      var options = {
        url: $(this).attr("action"),
        success: onsuccess
      };
      $(this).ajaxSubmit(options);
      return false;
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://malsup.github.io/jquery.form.js"&gt;&lt;/script&gt;
  
  &lt;form action="upload.php" method="POST" enctype="multipart/form-data" id="uploadform"&gt;
    &lt;input type="file" name="img" /&gt;
    &lt;input type="submit" name="submit" value="Upload" /&gt;
    &lt;br/&gt;
    &lt;br/&gt;Message :
    &lt;div id="onsuccessmsg" style="border:5px solid #CCC;padding:15px;"&gt;&lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's the php code:</p>
  
  <h3>upload.php</h3>
  
  <pre><code>&lt;?php
  $img=$_FILES['img'];
  if(isset($_POST['submit'])){ 
      if($img['name']==''){  
          echo "&lt;h2&gt;An Image Please.&lt;/h2&gt;";
      }else{
          $filename = $img['tmp_name'];
          $client_id="my-id";
          $handle = fopen($filename, "r");
          $data = fread($handle, filesize($filename));
          $pvars   = array('image' =&gt; 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 "&lt;h2&gt;Uploaded Without Any Problem&lt;/h2&gt;";
              echo "&lt;img src='$url'/&gt;";
          }else{
              echo "&lt;h2&gt;There's a Problem&lt;/h2&gt;";
              echo $pms['data']['error'];  
          } 
      }
  }
  ?&gt;
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>Here's an image of: AJAX request / response</p>
  
  <p><a href="https://i.stack.imgur.com/QM6jx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QM6jx.png" alt="enter image description here"></a></p>