PHP e.preventDefault causes isset($_POST['submit']) to be false, and $img['name'] to be blank

Question

I need to submit a form with an image and (later) text to a php form, which uploads the image to imgur, and returns the imgur url, this has to be done without changing the page, hence me using e.preventDefault() and ajax.

Issue is, when I do this, isset($_POST['submit']) is false, and $img['name'] is blank. If I don't use preventDefault, the page changes to upload.php, which I don't want,

How can I submit the form, with all files and post, and have it return once done, to the original page for alerting? Any help appreciated.

<?
header("Content-Type: text/plain");
$url = 'eg';
$img=$_FILES['img'];
if(isset($_POST['submit']))
{ 
 if($img['name']==''){  
  echo "<h2>An Image Please.</h2>";
 }else{
  $filename = $img['tmp_name'];
  $client_id="client_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'];
  echo $url;
 if($url!=""){
   echo $url;//"<h2>Image Uploaded</h2>";

   //echo "<img src='$url'/>";
  }else{
   echo "<h2>There's a Problem</h2>";
   echo $pms['data']['error'];  
  } 
 }
}else{echo 'no submit';}
?>

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

</head>
<html>
<button id='dog'>dog</button>
<form id='foo' action="upload.php" enctype="multipart/form-data" method="POST">
 Choose Image : <input name="img" size="35" type="file"/><br/>
 <input type="submit" name="submit" value="Upload"/>
</form> 
</html>
<script>

        $('form').on('submit', function (e) {

          e.preventDefault();

         var xhr = $.post({
            url: 'upload.php',
            data: $('form').serialize(),
            function (data) {
              alert(data.responseText);

            }
          });
          $('#dog').click(function(){alert(xhr.responseText);});

        });

</script>

PHP e.preventDefault causes isset($_POST['submit']) to be false, and $img['name'] to be blank

0 Answers0