使用croppie.js裁剪和上傳照片ajax php jquery

Question

我使用了一個名爲croppie的jquery crop插件在用戶將圖像上傳到數據庫之前裁剪圖像，但由於某種原因，圖像被插入上傳文件夾但sql查詢不起作用。請誰能幫我出去

的HTML標記。

<input type="file" id="upload"> 
<br/> 
<button class="btn btn-success upload-result">Upload Image</button> 

js裁剪併發送照片到ajax的testcrop.php。

$uploadCrop = $('#upload-demo').croppie({ 
    enableExif: true, 
    viewport: { 
     width: 200, 
     height: 200, 
     type: 'circle' 
    }, 
    boundary: { 
     width: 300, 
     height: 300 
    } 
}); 

$('#upload').on('change', function() { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $uploadCrop.croppie('bind', { 
      url: e.target.result 
     }).then(function() { 
      console.log('jQuery bind complete'); 
     }); 

    } 
    reader.readAsDataURL(this.files[0]); 
}); 

$('.upload-result').on('click', function (ev) { 
    $uploadCrop.croppie('result', { 
     type: 'canvas', 
     size: 'viewport' 
    }).then(function (resp) { 

     $.ajax({ 
      url: "components/testcrop.php", 
      type: "POST", 
      data: {"image": resp}, 
      success: function (data) { 
       if (data == 'Image Uploaded Successfully') { 
        html = '<img src="' + resp + '" />'; 
        $("#upload-demo-i").html(html); 
       } else { 
        $("body").append("<div class='upload-error'>" + data + "</div>"); 

       } 
      } 
     }); 
    }); 
}); 

testcrop.php

<?php 
session_start(); 
require('../includes/settings.php'); 

$data = $_POST['image']; 
list($type, $data) = explode(';', $data); 
list(, $data) = explode(',', $data); 
$data = base64_decode($data); 
$imageName = time() . '.png'; 

if ((($data == "image/gif") || ($data == "image/jpeg") || ($data == "image/jpg") || ($data == "image/pjpeg") || ($data == "image/x-png") || ($data == "image/png"))) { 

    if ($data["error"] > 0) { 
     echo "No Picture upload"; 
    } else { 

     if (file_exists("../uploads/" . $data)) { 
      echo 'This picture already exists'; 
     } else { 
      file_put_contents('upload/' . $imageName, $data); 
      $sql = "INSERT INTO " . $table_for_images . " (user_id, img_name, img_loc) 
         VALUES 
         ('" . $_SESSION['user_id'] . "', 
         '" . $ImageName . "', 
         'uploads/" . $data . "')"; 

      if (mysqli_query($con, $sql)) { 
       echo "Image Uploaded Successfully"; 
      } else { 
       echo('Something went wrong'); 
      } 
     } 
    } 
} else { 
    echo('Something went wrong'); 
} 
?> 

Answer 1

你只需要在查詢中替換$ imageName $的數據。

$sql = "INSERT INTO " . $table_for_images . " (user_id, img_name, img_loc) 
        VALUES 
        ('" . $_SESSION['user_id'] . "', 
        '" . $ImageName . "', 
        'uploads/" . $ImageName . "')";