Ajax DataUrl To PHP

Question

Я застрял здесь, я думаю, что я близко, но не уверен. это то, что мне удалось придумать. Создал входной файл, затем изменил размер изображения, затем попытался загрузить новое изображение в папку на сервере. Я думаю, что мой php-скрипт общается, но не получает никакого изображения. вот код ниже ..

ФОРМА

<img src="" id="image"> 
<input id="input" type="file" onchange="handleFiles()"> 

JAVASCRIPT

<script> 
function handleFiles(){ 
var dataurl = ""; 
var filesToUpload = document.getElementById('input').files; 
var file = filesToUpload[0]; 

// Create an image 
var img = document.createElement("img"); 
// Create a file reader 
var reader = new FileReader(); 
// Set the image once loaded into file reader 
reader.onload = function(e) 
{ 
    img.src = e.target.result; 

    var canvas = document.createElement("canvas"); 
    //var canvas = $("<canvas>", {"id":"testing"})[0]; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    var MAX_WIDTH = 400; 
    var MAX_HEIGHT = 300; 
    var width = img.width; 
    var height = img.height; 

    if (width > height) { 
     if (width > MAX_WIDTH) { 
     height *= MAX_WIDTH/width; 
     width = MAX_WIDTH; 
     } 
    } else { 
     if (height > MAX_HEIGHT) { 
     width *= MAX_HEIGHT/height; 
     height = MAX_HEIGHT; 
     } 
    } 
    canvas.width = width; 
    canvas.height = height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0, width, height); 

    dataurl = canvas.toDataURL("image/jpeg");  
} 
// Load files into file reader 
reader.readAsDataURL(file); 

     // Post the data 
     var fd = new FormData(); 
     fd.append("name", "some_filename.jpg"); 
     fd.append("image", dataurl); // blob file 
     fd.append("info", "lah_de_dah"); 
     $.ajax({ 
      url: 'http:///www.***/upload.php', 
      data: fd, 
      cache: false, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      success: function(data){ 
       $('#form_photo')[0].reset(); 
       location.reload(); 
} 

}); 
} 
</script> 

стороне сервера PHP

<?php 
$upload_image = $_FILES["image"][ "name" ]; 
$a = ('" alt="" />'); 
$folder = "images/"; 
move_uploaded_file($_FILES["image"]["tmp_name"], "$folder".$_FILES["image"]["name"]);; 

$file = 'images/'.$_FILES["image"]["name"]; 

$uploadimage = $folder.$_FILES["image"]["name"]; 
$newname = $_FILES["image"]["name"]; 

$msg = ''; 
if($_SERVER['REQUEST_METHOD']=='POST'){ 
$a = ('" alt="" />'); 
$image = $_FILES['image']['tmp_name']; 
$img = file_get_contents($image); 
$con = mysqli_connect('**','**','**','**') or die('Unable To connect'); 
$sql = ("INSERT into links (hyper_links) VALUES('<img src=\"\https://www.***/images/".$_FILES['image']['name']."$a')"); 

$stmt = mysqli_prepare($con,$sql); 

mysqli_stmt_bind_param($stmt, "s",$img); 
mysqli_stmt_execute($stmt); 

$check = mysqli_stmt_affected_rows($stmt); 
if($check==1){ 
    $msg = 'Successfullly UPloaded'; 
}else{ 
    $msg = 'Could not upload'; 
} 
mysqli_close($con); 
} 
?> 
<?php 
echo $msg; 
?> 

Мой PHP скрипт может из Вак, как я первоначально изменение размера изображения через PHP, поэтому я просто удалил то, что, как я думал, не понадобилось для примера. Вопрос в том, что я не уверен, как обрабатывать новое изображение на сервере.p

Answer 1

Прежде всего: Вы не должны загружать изображение в качестве base64. Просто отправьте исходный двоичный код. Поэтому использовать canvas.toBlob() и, возможно, некоторые polyfill

canvas.toBlob(function(blob){ 
    fd.append('image', blob, 'some_filename.png') 
}) 

В противном случае PHP не заметит никакой $ _FILES Потому что base64 будет рассматриваться только как любое другое поле $ _POST поле

Второй просто совет: вы можете использовать URL.createDataURL вместо использования FileReader, и вы, вероятно, следует использовать img.onload и img.onerror также

по канав FileReader вы просто сделать это:

img.onload = function(){ 
    // paint to canvas 
} 
img.onerror = function(){ 
    // meh, not a image 
} 
img.src = URL.createObjectURL(file)