Сериализация файла (изображения) с помощью ajax и вставка запроса

Question

Как я могу добавить или вставить файл (изображение), используя ajax.Я использовал serialize, чтобы получить все данные в форме и добавить их в свою таблицу.Я действительно хочу использовать ajax на своем сайте, чтобы избежать обновления, поэтому я все еще учусь тому, как использовать ajax.

require_once('conn.php');
if(!empty($_POST) && $_SERVER['REQUEST_METHOD']=='POST'){
$product_name = 
mysqli_real_escape_string($connection,$_POST['product_name']);
$product_description = 
mysqli_real_escape_string($connection,$_POST['product_description']);
$product_price = 
mysqli_real_escape_string($connection,$_POST['product_price']);
$product_discount = 
mysqli_real_escape_string($connection,$_POST['product_discount']);
$product_image = mysqli_real_escape_string($connection,$_POST['image']);
$product_quantity = 
mysqli_real_escape_string($connection,$_POST['product_quantity']);
$product_category = 
mysqli_real_escape_string($connection,$_POST['product_category']);
$save ="INSERT into products(
                         product_name,
                         product_description,
                         product_price,
                         product_discount,
                         product_image,
                         product_quantity,
                         product_cat
                         )values(
                         '$product_name',
                         '$product_description',
                         '$product_price',
                         '$product_discount',
                         '$product_image',
                         '$product_quantity',
                         '$product_category'
                          )";
if (mysqli_query($connection, $save)) {
 echo "New record created successfully";
} else {
  echo "Error: " . $save . "<br>" . mysqli_error($connection);
}

mysqli_close($connection);
} 

Это мой код ajax, где я использовал сериализацию.Все значения вставляются за исключением изображения.

 <form id="addform">
        <div class="modal-body">
             <div class="form-group">
              <label for="exampleInputEmail1">Product Name</label>
              <input type="text" class="form-control" id="product_name"  
name="product_name" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
             <div class="form-group">
              <label for="exampleInputEmail1">Product Description</label>
              <input type="text" class="form-control" 
id="product_description"  name="product_description" aria- 
describedby="emailHelp" placeholder="Enter email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
             <div class="form-group">
              <label for="exampleInputEmail1">Product Price</label>
              <input type="text" class="form-control" id="product_price"  
name="product_price" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
            <div class="form-group">
              <label for="exampleInputEmail1">Product Discount</label>
              <input type="text" class="form-control" id="product_discount"  
name="product_discount" aria-describedby="emailHelp" placeholder="Enter 
email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
              <div class="form-group">
              <label for="exampleInputEmail1">Product Image</label>
              <input type="file" class="form-control" id="image"  
name="image" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>

            <div class="form-group">
              <label for="exampleInputEmail1">Product Quantity</label>
              <input type="text" class="form-control" id="product_quantity"  
name="product_quantity" aria-describedby="emailHelp" placeholder="Enter 
email">
              <small id="namenotif" class="form-text text-muted"></small>
            </div>
            <div class="form-group">
              <label for="exampleSelect1">Select Product Cat</label>
              <select class="form-control" id="product_category" name 
 ="product_category">
                <option value="Regular">Regular</option>
                <option value="Sale">Sales</option>
                <option value="FeaturedProduct">Featured Products</option>

              </select>
            </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data- 
dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="saveproduct" 
name="save">Save Product</button>
        </div>

      </div>
    </form>

<script> 
$(document).ready(function() {
$(document).on("click","#saveproduct",function(){
  $.ajax({
    url:"addproduct.php",
    type:"POST",
   data: $("#addform").serialize(),
    success:function(data){
    alert(data);
       }
      });
  });
});
</script> 

Это мой загрузчик для моего типа ввода, и, как вы можете видеть, я использовал файл типа ввода, чтобы все работало, но, похоже, это не так.Thankyouu

Answer 1

Попробуйте этот код ниже

сначала назначьте

<form id="addform" enctype="multipart/form-data">

затем

$('#addform').submit(function() {
                var data = new FormData(this); 
                $.ajax({
                    url: 'addproduct.php',
                    data: data,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function(data) {
                        alert(data);

                    }

                });
            });

Answer 2

в вашей форме отсутствует **enctype** при отправке файла

<form id="addform" enctype="multipart/form-data">
.....
</form>