使用jQuery ajax php mysqli上传图像

Question

使用ajax上传数据库中的图像URL，但是提交表单时出现错误。 我想上传图像url im数据库而不刷新页面。 错误是GET https://api.ciuvo.com/api/analyze?url=http%3A%2F%2Flocalhost%2F&version=2.1.3&tag=threesixty&uuid=C473346A-075C-48CD-A961-F4B68EFE2C4F 400（错误请求）

 **html code**
<form id="form" enctype="multipart/form-data">
<label>Image:</label>
<input type="file" name="txtimg">
<input type="submit" value="INSERT IMAGE" name="btnimage">
</form>
<div id="message"></div>


**ajax request**
<script type="text/javascript">
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
$.ajax({
  url: "upload.php",   
  type: "POST",             
  data:  new FormData(this),   
  contentType: false,          
      cache: false,         
  processData:false,        
  success: function(data)     
    {
      $("#message").html(data);     
    }         
 });
 }));
 });

PHP代码

    <?php
$host="localhost";
$user="root";
$pass="";
$db="test";
$con=mysqli_connect($host,$user,$pass);
mysqli_select_db($con,$db);
if (isset($_FILES["file"]["type"])) {
$dir = "images/";
$imagelocation=$dir.basename($_FILES['txtimg']['name']);
$extension = pathinfo($imagelocation,PATHINFO_EXTENSION);
if($extension != 'jpg' && $extension != 'png' && $extension != 'jpeg')
{
    echo"plzz upload only jpg,jpeg And png";
}
else
{
    if(move_uploaded_file($_FILES['txtimg']['tmp_name'],$imagelocation) )

    {
        if(mysqli_query($con,"Insert into img (img_url) values($imagelocation')"))
        {
            echo"SUCCESSFULLY";
        }
    }

        else {

            echo"ERROR";

        }
}


}

?>

Answer 1

您不应该在ajax请求中调用FormData对象，

HTML代码

<form id="form" enctype="multipart/form-data">
<label>Image:</label>
<input type="file" name="txtimg">
<input type="submit" value="INSERT IMAGE" name="btnimage">
</form>
<div id="message"></div>


**ajax request**
<script type="text/javascript">
$(document).ready(function (e) {

$("#form").on('submit',(function(e) {
e.preventDefault();

var fdata = new FormData(this);

$.ajax({
  url: "upload.php",   
  type: "POST",             
  data: fdata,   
  contentType: false,          
      cache: false,         
  processData:false,        
  success: function(data)     
    {
      $("#message").html(data);     
    }         
 });
 }));
 });