显示上传的图片

Displaying uploaded image

本文关键字：显示      更新时间：2023-09-26

我正在尝试使用Ajax上传/调整图像大小，然后在浏览器中显示它，而不是将其保存到文件中。我希望有一个图像，但我得到了一堆乱码。

可行吗?或者我不能，需要采取其他措施，如保存到文件，然后采取它的路径?或者使用帆布?

感谢您的宝贵时间。

HTML 

<form enctype="multipart/form-data" action="file.php" method="Post" id="form">
  <input type="file" name="user_image">
  <input type="submit" value="Submit" name="submit">
</form>
<div id="blah"></div>
Javascript 

//using jquery-form.js
$('#form').on('submit', function(e) {
  e.preventDefault();
  $(this).ajaxSubmit({
    target: '#blah',
    success:  function(){}
  });
});
PHP 

$img_width = imagesx($this->image);
$img_height = imagesy($this->image);
$image = imagecreatefromjpeg($_FILE['user_image']['tmp_name']);
$resized_image = imagecreatetruecolor(300, 300);
imagecopyresampled($resized_image, $image, 0, 0, 0, 0, 300, 300, $img_width, $img_height);
header('Content-Type:image/jpeg');
imagejpeg($resized_image);

在PHP中执行以下操作

ob_start();
// header("Content-type: image/jpeg"); // fairly sure you won't need this
imagejpeg($resized_image);
echo base64_encode(ob_get_clean());
die;

假设在HTML中有

<img id="theimage" />

then in JS

success:  function(data){
    $('#theimage').attr('src', 'data:image/jpeg;base64,' + data);
}

您正在尝试使用ajax获取原始jpeg数据。您不应该执行ajax上传，而是直接发送表单以查看调整后的图像。如果这不是您想要的，那么您需要将原始jpeg数据编码为base64编码的数据url，并将其插入<img>元素的src属性。

相关文章：