Javascript 如何将刚上传的图像发送到php而不存储它？

大家好，我将直接介绍我在用例中遇到的问题：我正在开发一种配置程序，我有一个网页（我们称之为page1），用户可以在其中上传图像。图像通常显示在img标签中。当用户上传完图像后，他可以进入下一页（我们称之为第2页）。现在，在第2页上，我想显示用户上传的图像，而不存储图像。这就是我迄今为止一直在尝试的：

在此之前，我已经在json中直接插入了图像的src属性。但是浏览器给了我一个错误，GET请求太长或者类似的东西。因此，我找到了使用base64转换图像的解决方案：

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
function sendSelectedProducts()
{
   var logo = document.getElementsByName('logo-container')[0];

   var base64 = getBase64Image(logo);
   console.log(base64);
   var json_string = '{"img": "' + base64 + '" }';
   console.log(json_string);

   window.location.replace('riepilogo.php?prodotti=' + json_string);

}

因此，我使用这段代码要做的是发送一个带有base64转换图像的Json。在PHP端，这是尝试转换回图像的代码：

function base64ToImage($base64_string, $output_file) {
   $file = fopen($output_file, "wb");
   $data = explode(',', $base64_string);
   fwrite($file, base64_decode($base64_decode));
   fclose($file);
   return $output_file;
}
echo '<p>'.$img.'</p>';
echo '<a class="cart-image" href="#"><img src="'.base64ToImage($img, 'logo_file.jpg').'" alt="logo"></a>'?>

函数base64ToImage（$base64\u字符串，$output\u文件）{
$file=fopen（$output_file，“wb”）；
$data=分解（“，”，$base64_字符串）；
fwrite（$file，base64_decode（$base64_decode））；
fclose（$文件）；
返回$output\u文件；
}
回音“”.$img.
”；
回音“”？>

---

这段代码不起作用，我正在寻找解决方案，不存储在服务器上的形象。如何操作？

您可以保存所选文件（例如，在

窗口var

或

本地存储中）并在下一页中使用呈现图像

请参见以下示例：


函数saveImage（img）{
window.file=img.files[0]；
}
函数loadImage（）{
设ctx=document.getElementById（'canvas'）.getContext（'2d'）；
让url=url.createObjectURL（window.file）；
设img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，20,20）；
}
img.src=url；
}

加载图像
您不需要从base64解码图像，只需执行以下操作：

echo''？>

其中，
$img
是base64格式的图像。有关更多信息，请参阅：
您需要了解HTTP是如何工作的，以了解为什么您所做的工作不起作用

HTTP是浏览器和Web服务器（可以运行PHP代码）通信的方式

这里需要记住的一件重要事情是，在任何两个Web页面之间，Web服务器都没有可共享的状态——这就是为什么HTTP通常被称为无状态协议的原因。这是一件好事——它为Web服务器（和PHP）节省了许多不必要的复杂性

我不建议尝试用
window.localStorage
（或
sessionStorage
）之类的东西来规避HTTP的无状态特性--如果用户在您的网站上加载了同一网页的多个实例，该怎么办？您将如何知道存储中的哪些对象对应于哪些上载工作流

我见过很多人尝试这样做，但最终总是失败

在您的案例中，有几种很好的方法可以解决“无状态”问题——一个网页上载的文件如何可以被另一个网页访问，同时又如何使该文件也可供Web服务器使用

在这个答案中，我想介绍一个所谓的单网页应用程序解决方案，在这个解决方案中，您只需删除两个网页，而只需一个网页即可完成所有功能！通过这种方式，您可以保持客户机上的状态，但也可以保持与HTTP实际工作方式一致的干净方式：


选择一个图像文件
选定图像

上面的HTML文档是用一个简单的表单设置的（即使没有启用JavaScript，也可以将文件上载到Web服务器）。它包含一个文件输入控件，允许您实际选择文件（单个图像文件，因为
input
元素不包含
multiple
属性，并为
accept
属性指定
image/*
）

但是，它还包含一个
img
元素，脚本使用该元素在选择后立即加载和显示所选图像文件。我从您的问题中了解到，这可能满足您访问所选文件的要求。该文件是一个
Blob
，因此您可以使用它执行任何操作，包括在画布中绘制它，或者以其他方式修改它。在这里，我只是将其显示为图像

该网页有趣的特性是，虽然所选图像的预览仅通过JavaScript工作，但即使没有JavaScript，表单仍将提交所选文件。用户代理将表单数据（图像）发布到方便的测试服务器（位于
http://httpbin.com/post
），它恰好以JSON文件的形式回显您上传的内容。使用自己的服务，您可以自己处理数据

这解决了多个网页需要共享对选定文件的访问权限的问题，如果实现正确，至少需要先上载文件，然后从上载在Web服务器上建立的URL访问文件。不一定比这个答案中的解决方案更复杂，事实上可以说不那么复杂，因为在JavaScript开始允许我在上面粘贴的文档中使用这种东西之前，它是如何完成的。但我认为，这个答案涵盖了所谓的单页Web应用程序，应该适合当今时代的您

这样说，我认为一个纯粹的PHP解决方案也是有趣的，并且如果有人希望看到另一个答案，你可以再写一个答案。< /P>你所说的“不存储图像”是什么意思——图像不会存储在哪里？你希望一个网页从哪里加载图像？首先，如果你要上传一个文件，那么通过表单上传（因此生成一个POST请求）而不是GET将更有意义。那么你就不需要对尺寸有任何限制，也不需要把事情搞得一团糟