title: How to upload an image to server directory using ajax?
body: <p>I have this ajax post to the server to send some data to an SQL db :</p>
  <pre><code>        $.ajax({
              method: &quot;POST&quot;,
              url: &quot;https://www.example.com/main/public/actions.php&quot;,
              data: {
                  name: person.name,
                  age: person.age,
                  height: person.height,
                  weight: person.weight
              },
              success: function (response) {
              console.log(response)
              }
  
          })
  
  </code></pre>
  <p>in the server i get this data with php like this :</p>
  <pre><code>&lt;?php
  
  include &quot;config.php&quot;;
  
  if(isset ( $_REQUEST[&quot;name&quot;] ) ) {
  
  $name = $_REQUEST[&quot;name&quot;];
  $age = $_REQUEST[&quot;age&quot;];
  $height = $_REQUEST[&quot;height&quot;];
  $weight = $_REQUEST[&quot;weight&quot;];
  
  $sql = &quot;INSERT INTO persons ( name, age, height, weight )
          VALUES ( '$name', '$age', '$height', '$weight' )&quot;;
  
  if ($conn-&gt;query($sql) === TRUE) {
      
    echo &quot;New person stored succesfully !&quot;;
      
    exit;
    }else {
    echo &quot;Error: &quot; . $sql . &quot;&lt;br&gt;&quot; . $conn-&gt;error;
    exit;
    }
      
  };
  
  ?&gt;
  </code></pre>
  <p>I also have this input :</p>
  <pre><code>&lt;input id=&quot;myFileInput&quot; type=&quot;file&quot; accept=&quot;image/*&quot;&gt;
  </code></pre>
  <p>and in the same directory as <code>actions.php</code> i have the folder <code>/images</code></p>
  <p>How can i include an image ( from <code>#myFileInput</code> ) in this ajax post and save it to the server using the same query in php ?</p>
  <p>I have searched solutions in SO but most of them are &gt;10 years old,i was wondering if there is a simple and modern method to do it,i'm open to learn and use the fetch api if its the best practice.</p>