Question

是否可以在currunt浏览器会话中显示图像而无需将其上传到服务器？

我想在用户输入上传按钮时在我的php页面上显示图像，上传的图像会在目标网址上显示。

这是我的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'>";

它不显示图像。那么以某种方式可以按照我的方式显示图像吗？

任何帮助都很受欢迎！

谢谢！

Answer 1

您可以将图片转换为base64，请参阅http://www.motobit.com/util/base64/css-images-to-base64.asp。

它会生成<img />，如下所示：<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAA// lot more characters" />

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

在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?

Answer 2

在这里：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 个答案: