Javascript 使用ajax上传图像

我有一个变量

src

和

image

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

我想把这个

image

变量传递给

php

中的一个公共函数来上传。我需要传递的是什么，是src、base64、图像本身还是新表单数据

现在我有：

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);
    }
});

在我的

视图中

：

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);
                }
            }
        }
    }
}

并获得：

 {"Image":"[object HTMLImageElement]"}---Image was uploaded

但图像未上载

如果查看文档，您将看到第二个参数包含字符串或blob。
因此，如果无法使用FormData对象将图像作为Blob或文件获取，则传递HTMLImageElement将不起作用。
由于您正在尝试上载

#img_标记

的

src

，因此只有当它是base64编码图像时，这才真正起作用。
在这种情况下，使用

data.append（'Image'，src）

并从

$\u POST['Image']

读取数据，然后将其清理并解码

---

如果图像src是一个常规url，请使用curl的

$\u POST['image']

将图像下载到您的服务器。

我做了一些研究，发现非常有用。（多亏了这个）

我通过获取

base64

编码的图像，将图像文件从

image src

上传到服务器中的一个目录中，并传递给控制器进行解码和上传。（还要感谢穆萨、达涅洛和罗里·麦克罗森）

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

在脚本中：（我将base64编码的图像传递给控制器处理）

var src=$（this.attr（'src'）；
$.ajax({
url:“/products/additional\u image\u upload”，
数据：{
“id”：“，
“base64”：src
},
类型：“POST”，
成功：功能（msg）{
控制台日志（msg.--Img上传）；
},
错误：函数（错误）{
console.log（错误）；
}
});

---

一切都很顺利。添加此选项以帮助将来的读者。

您需要上载图像的二进制数据，而不是图像的字符串表示形式。你到底想在这里干什么？我相信这是一个X/Y问题，因为我不相信你的最终目标是上传一个空图像。你尝试过这个吗<代码>数据。追加（'Image'，src）2）不要使用

$\u文件

它总是空的，只使用JSON数据。哦，谢谢你指出这一点，我一直在调试这个，一直在传递一个空图像，等等，让我尝试将src传递给那个image@DanielO，如果我使用src，图像会被移动到目录中吗？更多详细信息：好的，所以我得到了图片的base64，你按照答案中的建议上传它。删除

数据：[；base64]，

部分。解码base64数据。将其保存到文件中。

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);
}

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);
    }
});