Question

我有变量src和image，

var src = $("#img_tag").attr('src');
var image = new Image();

我想将此image变量传递给php中的公共函数进行上传。我需要传递的完全是什么？是 src ， base64 ，image本身是{{ 1}}？

现在我有：

new FormData

在我的var data = new FormData(); var src = $("#img_tag").attr('src'); var image = new Image(); data.append('Image', image); console.log(data); $.ajax({ url: "/products/image_upload", type: "POST", data: data, processData: false, contentType: false, success: function (msg) { console.log(msg+"---Image was uploaded"); } error: function(err) { console.log(err); } });：

中

view

得到：

public function image_upload() {
    $this->autoRender = false;
    echo json_encode($this->data);
    if($this->request->is('post'))
    {
         if(!empty($_FILES['Image']['name'])) {
            $file = $_FILES['Image'];
            echo json_encode($file);
            $ext = substr(strtolower(strrchr($file['name'], '.')), 1);
            $arr_ext = array('jpg', 'jpeg', 'gif', 'png');
            $temp = explode(".", $file['name']);
            $newfilename = $_FILES['Image']['name'];
            if(in_array($ext, $arr_ext))
            {
                if(move_uploaded_file($file['tmp_name'], WWW_ROOT . 'img/product-uploads' . DS . $newfilename))
                {
                    echo json_encode("Image uploaded properly");
                    return json_encode($_FILES);
                }
            }
        }
    }
}

但图片未上传

Answer 1

如果您查看FormData.append文档，您将看到第二个参数采用字符串或blob。
因此传递HTMLImageElement不会起作用，如果你不能将图像作为Blob或使用FormData对象的文件获得真的帮助。
由于您尝试上传src #img_tag，因此仅当它是base64编码图像时才会真正起作用。
在这种情况下，请使用data.append('Image', src);并从$_POST['Image']读取数据，然后将其清理并解码。

如果图片src是常规网址，请使用带有curl的$_POST['Image']将图片下载到您的服务器。

Answer 2

我做了一些研究，发现this article非常有帮助。（多亏了那个）

我设法通过获取image src编码图像，将图像文件从base64上传到我服务器中的目录，然后传递给控制器进行解码和上传。（还要感谢Musa，DanielO和Rory McCrossan）

在控制器中：来自this article的代码。（我以日期时间格式添加了自定义文件名）

public function additional_image_upload() {
    $this->autoRender = false;

    $base64 = $this->request->data['base64'];
    $product_id = $this->request->data['id'];
    $baseFromJavascript = $base64;

    $data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $baseFromJavascript));

    $t = microtime(true);
    $micro = sprintf("%06d",($t - floor($t)) * 1000000);
    $date_tmp = new DateTime( date('Y-m-d H:i:s.'.$micro, $t) );

    $date = $date_tmp->format("Y-m-d_his.u");
    $filepath = WWW_ROOT . 'img/product-uploads' . DS ."$date.jpg"; // or image.jpg
    file_put_contents($filepath,$data);
}

在脚本中:(我传递了base64编码的图像供控制器处理）

var src = $(this).attr('src');
$.ajax({
    url:"/products/additional_image_upload",
    data:{
        "id": "<?= $id; ?>",
        "base64": src
    },
    type:"POST",
    success: function(msg) {
        console.log(msg."---Img uploaded");
    },
    error: function(error) {
        console.log(error);
    }
});

一切都很好。添加此内容以帮助未来的读者。

使用ajax上传图像

2 个答案: