使用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);     
    }         
 });
 }));
 });