【问题标题】:Display an image on the page without uploading to server在页面上显示图像而不上传到服务器
【发布时间】:2026-02-23 01:25:02
【问题描述】:

这是否可以在当前浏览器会话上显示图像而不将其上传到服务器?

当用户输入上传按钮时,我试图在我的 php 页面上显示图像,上传的图像将临时出现在目标 url 上。

这是我的html表单

<form action="demo.php"method="post"enctype="multipart/form-data">
<input type="file"name="uf">
<input type="submit"value="upload">
</form>

还有目标文件:

<?php
$pic=$_FILES["uf"]["name"];
echo "<img src='$pic'>";

它不显示图像。那么这是否有可能以我的方式显示图像?

非常感谢任何帮助!

谢谢!

【问题讨论】:

  • 以下关于 SO 的先前答案可能会有所帮助:*.com/questions/3996004/…
  • 如果您不想将图像上传到服务器,那么php 标记和您问题中的 PHP 代码不合适。

标签: php


【解决方案1】:

给你:http://jsfiddle.net/LvsYc/

html:

<form method="post" enctype="multipart/form-data">
    <input type="file" id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

js(需要 jQuery):

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

【讨论】:

    【解决方案2】:

    可以将图片转成base64,见http://www.motobit.com/util/base64/css-images-to-base64.asp

    它将生成一个&lt;img /&gt;,如下所示:&lt;img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAA// lot more characters" /&gt;

    在我看来,这是一种不好的做法,因为您的浏览器会缓存图像以避免发送大量请求以获取他已经拥有的图像。

    在php中:

    $path = 'myfolder/myimage.png';
    $type = pathinfo($path, PATHINFO_EXTENSION);
    $data = file_get_contents($path);
    $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
    

    (取自)How to convert an image to base64 encoding?

    【讨论】:

    • @Ajey:因为如果您不想在浏览器中加载图像,您仍然会加载 base64 图像的内容。在我的网络抓取工具中,我禁用了图像加载,以最大限度地减少对服务器的请求,这样你就不得不下载图像数据。如果他们不需要加载图像等,谷歌机器人等也是一样的。
    • @Ajey:第二个原因:浏览器缓存。浏览器会存储您在网站上下载的图像,以避免对服务器的请求过多。使用 base64,您可以强制加载图像,例如,如果客户端处于活动状态,您应该避免每个客户端每小时 500 个请求。