title: How to save an image file (BLOB) in the database using jquery, ajax and php
body: <p>I want to save an image in my database as a BLOB file using jquery, Ajax and PHP.
  I can upload it and display it in the form (if it is inserted manually in the database). However, when I change it on the form, the new image is well displayed but when I click on save it is not saved in the database. I did not find any solution here using jquery, Ajax and PHP, and storing the whole image in the database.</p>
  
  <p>Here is a part of my HTML code (Content/users.php) :</p>
  
  <pre><code>   &lt;img src="images/defaultprofile.png" id="photoUserUpload"
     name="image" onClick="triggerClick()" /&gt;
     &lt;input type="file"name="profileImage" id="profileImage" style="display: 
     none;" accept=".jpg, .png" onchange="displayImage(this)" /&gt;
  &lt;/div&gt;
  &lt;div&gt; 
    &lt;button id="saveTechItem" class="btn btn-primary saveTechItem"&gt;Save&lt;/button&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>Here is a part of my js code (Data_Scripts/users.js):</p>
  
  <pre><code>$(document).on("click", ".saveItem", function() {
      if (validateForm()) {   
          addOrUpdateItem();
      }
  });
  function addOrUpdateItem(event) {
      var itemId = $("#userId").val();
      var fullName = $("#txtUserName").val();
  
      var pic=$("#photoUserUpload").attr('src');
      alert (pic);
  
      //I tried also to append the file before submit
      var file=new FormData();
      file.append('file', file2);
      //alert (file2);
  
      var itemData = {
          id: itemId,
          postType: 'addOrUpdate',
          fullName: fullName,
          pic:pic
      };
  
      $.ajax({
          url: 'data_ajax/users.php',
          data: itemData,
          type: "POST",
          cache: false,
          success: function(data) {
                 location.reload();
          },
          error: function(e) {
              alert("error while trying to add or update user!");
          }
      });   
  }
  </code></pre>
  
  <p>Here is a part of my PHP code (DataAjax/user.php):</p>
  
  <pre><code>if (isset($_POST['id'])) {
      $postType = $_POST['postType'];
      if ($postType == "addOrUpdate") {   
          $Id = $_POST['id'];
          $FullName = $_POST['userName']; 
          $pic = base64_encode(file_get_contents($_POST['pic']));
          $data = new Data();
          $db = $data-&gt;dataHandler();
          $query = "INSERT INTO Users (`id`, `fullname`, `image`) 
                  values ('$Id', '$FullName', '$pic')";
          $db-&gt;query($query);
           }
  }
  </code></pre>