如何将上传的图像发送到没有存储的PHP？

Question

嗨，我将直接介绍我的问题用例：我正在研究一种配置器，我有一个网页（让我们称之为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>'?>

此代码不起作用，我正在寻找不在服务器上存储图像的解决方案。 我能怎么做？

Answer 1

您可以保存所选文件（例如，在window var或local storage ），并使用画布在下一页中呈现图像。

请参阅以下示例：

 function saveImage(img) { window.file = img.files[0]; } function loadImage() { let ctx = document.getElementById('canvas').getContext('2d'); let url = URL.createObjectURL(window.file); let img = new Image(); img.onload = function() { ctx.drawImage(img, 20, 20); } img.src = url; }

 <input type="file" id="imgFile" onchange="saveImage(this);" /> <button onclick="loadImage()">Load image</button> <canvas width="400" height="300" id="canvas"/>

您应该将saveImage放在第一页中，将loadImage放在第二页中。

我希望很清楚。 再见。

Answer 2

您无需从base64解码图像，只需执行以下操作：

echo '<a class="cart-image" href="#"><img src="data:'.$img.'" alt="logo"></a>'?>

其中$img是base64格式的图像。 有关详细信息，请参阅：如何以HTML格式显示Base64图像？

Answer 3

您需要了解HTTP如何工作才能理解为什么您所做的事情无法发挥作用。

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

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

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

我见过很多人都试图这样做，而且最终总会打破。

在您的情况下，有几种很好的方法可以解决“无状态”问题 - 如何使用一个Web页面上载文件，另一个Web页面可以访问，并使该文件也可供Web服务器使用？

在这个答案中，我想介绍一个所谓的单一网页应用程序解决方案，在这里你只需要取消两个网页，而是拥有一个可以完成所有工作的网页！ 这样，您可以将状态保留在客户端上，同时也保持与HTTP实际工作方式良好对齐的干净方式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form enctype="multipart/form-data" method="post" action="http://httpbin.org/post">
            <label for="file-input">Select an image file</label>
            <input accept="image/*" id="file-input" name="image" type="file">
            <label for="file-selection-preview-image">Selected image</label>
            <img id="file-selection-preview-image"><!-- this element will display selected image. -->
            <input type="submit">
            <script>
                const form = document.currentScript.parentElement, file_input = form.elements.image;
                file_input.addEventListener("change", function(ev) { /// Whenever the selection changes
                    const files = ev.target.files;
                    console.assert(files.length == 1); /// Assert that there is only one file selected
                    console.assert(files[0].type.startsWith("image/")); /// Assert that the selected file is an image
                    const image = form.querySelector("img");
                    if(image.src) URL.revokeObjectURL(image.src); /// The kind of URLs we are dealing with refer to in-memory objects, so we have to dispose of them when we no longer need them -- the user agent does not do this for us automatically.
                    image.src = URL.createObjectURL(files[0]); /// Display selected file with the `img` element
                });
                /// User agent is free to retain file selection even after the Web page has been re-loaded, so if there is [a selection], we fire a "change" event manually so that the handler defined above may reflect this as it ordinarily would.
                if(file_input.files.length) file_input.dispatchEvent(new Event("change", { bubbles: true }));
            </script>
        </form>
    </body>
</html>

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

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

网页的有趣属性是所选图像的预览仅适用于启用JavaScript，但表单会将所选文件提交到您选择的URL（此处http://httpbin.com/post ，方便的测试服务器无论如何，它只是以JSON文件的形式回显你上传的内容。 因此，您可以使用PHP脚本拦截POST数据并采取相应措施。

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

也就是说，我认为一个纯粹的PHP解决方案也很有趣，如果有人希望看到它，可以提出另一个答案。

如何将上传的图像发送到没有存储的PHP？

问题描述

3 个解决方案

解决方案1
1 2019-06-19 14:15:52

解决方案2
1 2019-06-19 15:37:26

解决方案3
1 2019-06-20 09:03:57

如何将上传的图像发送到没有存储的PHP？

问题描述

3 个解决方案

解决方案1 1 2019-06-19 14:15:52

解决方案2 1 2019-06-19 15:37:26

解决方案3 1 2019-06-20 09:03:57

解决方案1
1 2019-06-19 14:15:52

解决方案2
1 2019-06-19 15:37:26

解决方案3
1 2019-06-20 09:03:57