使用ajax上傳圖片

Question

我有一個變量src和image ，

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

我想將此image變量傳遞給php的公共函數進行上傳。 它是什么，正是我需要傳遞，是它的SRC，以base64，將image本身作為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);
                }
            }
        }
    }
}

並得到：

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

但圖像未上傳

Answer 1

我進行了一些研究，發現這篇文章非常有幫助。 （多虧了）

我設法通過獲取base64編碼的圖像，將圖像文件從image src上傳到我的服務器中的目錄，傳遞給控制器​​進行解碼和上傳。 （還要感謝 Musa、DanielO 和 Rory McCrossan）

在控制器中： 本文中的代碼。 （我添加了一個日期時間格式的自定義文件名）

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

一切都很好。 添加此內容以幫助未來的讀者。

Answer 2

如果您查看FormData.append文檔，您將看到第二個參數采用字符串或 blob。
因此，傳遞 HTMLImageElement 是行不通的，如果您不能使用 FormData 對象將圖像作為 Blob 或文件獲取並沒有真正的幫助。
由於您正在嘗試上傳#img_tag的src ，因此只有當它是 base64 編碼圖像時，這才真正有效。
在這種情況下使用data.append('Image', src); 並從$_POST['Image']讀取數據，然后對其進行清理和解碼。

如果圖像 src 是常規 url，請使用$_POST['Image']和 curl 將圖像下載到您的服務器。