Question

我被困在这里，我想我很亲密但不确定。这就是我设法提出的。创建文件输入，然后调整图像大小，然后尝试将新图像上传到服务器中的文件夹。我认为我的PHP脚本正在通信，但没有收到任何图像。这是下面的代码..

FORM

<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调整图像大小，所以我只删除了我认为不需要的示例。问题是我不知道如何处理server.p

的新图像

Answer 1

首先：您不应将图片上传为base64。只需发送原始二进制文件即可。因此，请使用canvas.toBlob()，也可以使用polyfill

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

否则PHP将不会注意到任何$ _FILES cuz 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)

Ajax DataUrl到PHP

1 个答案: