Question

如何使用Ajax添加或插入文件（图像）。我使用序列化以表格形式获取所有数据并将其添加到表中。我真的很想在我的网站上使用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>

这是我输入类型的引导程序，如您所见，我使用输入类型文件使工作正常，但似乎没有。谢谢你

Answer 1

您的表单在发送文件时缺少**enctype**

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

Answer 2

请尝试以下代码

先分配

<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);

                    }

                });
            });

使用ajax序列化文件（图像）并插入查询

2 个答案: