Question

我正在使用JCrop和此处提供的代码How should I crop the image at client side using jcrop and upload it?，除了我不知道如何将裁剪后的图像上传到服务器外，效果很好。

这是javascript / ajax中最相关的部分

$("#form").submit(function(e) {
  e.preventDefault();
  formData = new FormData($(this)[0]);
  var blob = dataURLtoBlob(canvas.toDataURL('image/png'));

  //---Add file blob to the form data
  formData.append("cropped_image[]", blob);
  $.ajax({
    url: "sendImage.php",
    type: "POST",
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    success: function(data) {
      alert("Success");
    },
    error: function(data) {
      alert("Error");
    },
    complete: function(data) {}
  });
});

画布被添加到div'views'。

 <div id="views"></div>

这就是我到目前为止尝试上传图片的php

//File destination
$destination = '../Images/Uploads/';
//Get uploaded image file it's temporary name
$image_tmp_name = $_POST["formData"];
//Move temp file to final destination
move_uploaded_file($image_tmp_name, $destination);

我知道我已经走了，但任何指针都会很棒，非常感谢你！

我知道临时文件名$ image_tmp_name = $ _POST [“formData”];我错了，应该是“views”而不是“formData”吗？

编辑添加：

$upload_dir = '../Images/uploads/';  
$img = $_FILES['views'];
$img = str_replace('data:image/jpg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.jpg";
$success = file_put_contents($file, $data);

这是否更接近？当我的图像是jpg时，我意识到我正在使用'image / png'所以我已经将png改为jpg了。当我试图保存它时仍然得到一个空白的jpg。我整天都在搜索stackoverflow以获得答案而且还没有进一步，请任何人都可以给我一个关于该怎么做的提示？谢谢！

使用ajax，php将图像保存到服务器

0 个答案: