[英]Uploading image using ajax
I have a variables src
and image
,我有一个变量
src
和image
,
var src = $("#img_tag").attr('src');
var image = new Image();
I want to pass this image
variable to a public function in php
to upload.我想将此
image
变量传递给php
的公共函数进行上传。 What is it that exactly that I need to pass, is it the src , the base64 , the image
itself as new FormData
?它是什么,正是我需要传递,是它的SRC,以base64,将
image
本身作为new FormData
?
Right now I have:现在我有:
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);
}
});
In my view
:在我
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);
}
}
}
}
}
And getting:并得到:
{"Image":"[object HTMLImageElement]"}---Image was uploaded
BUT IMAGE IS NOT UPLOADED但图像未上传
I got a bit of a research, and found this article super helpful.我进行了一些研究,发现这篇文章非常有帮助。 (Thanks to that)
(多亏了)
I managed to upload an image file to a directory in my server from an
image src
by getting thebase64
encoded image, passed for the controller to decode and upload.我设法通过获取
base64
编码的图像,将图像文件从image src
上传到我的服务器中的目录,传递给控制器进行解码和上传。 (Also thanks to Musa, DanielO, and Rory McCrossan)(还要感谢 Musa、DanielO 和 Rory McCrossan)
In Controller: Code from this article .在控制器中: 本文中的代码。 (I added a custom filename in a datetime format)
(我添加了一个日期时间格式的自定义文件名)
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);
}
In Script: (I passed the base64 encoded image for the controller to handle)在脚本中:(我传递了 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);
}
});
And all was working great.一切都很好。 Added this to help future readers.
添加此内容以帮助未来的读者。
If you take a look at the FormData.append doc, you will see that the second argument takes a string or a blob.如果您查看FormData.append文档,您将看到第二个参数采用字符串或 blob。
So passing an HTMLImageElement isn't going to work, if you cant get the image as a Blob or a File using a FormData object doesn't really help.因此,传递 HTMLImageElement 是行不通的,如果您不能使用 FormData 对象将图像作为 Blob 或文件获取并没有真正的帮助。
Since you're trying to upload the src
of #img_tag
, this will only really work if it is the base64 encoded image.由于您正在尝试上传
#img_tag
的src
,因此只有当它是 base64 编码图像时,这才真正有效。
In this case use data.append('Image', src);
在这种情况下使用
data.append('Image', src);
and read the data from $_POST['Image']
then clean it up and decode it.并从
$_POST['Image']
读取数据,然后对其进行清理和解码。
If the image src is a regular url, use $_POST['Image']
with curl to download the image to your server.如果图像 src 是常规 url,请使用
$_POST['Image']
和 curl 将图像下载到您的服务器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.