顯示上傳的圖片

Question

我正在嘗試使用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);

Answer 1

在您的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" />

然后在JS中

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

Answer 2

您正在嘗試使用ajax獲取原始jpeg數據。您不應執行ajax上傳，而應直接發送表單以查看調整大小的圖像。 如果這不是您想要的，則需要將原始jpeg數據編碼為base64編碼的數據URL，並將其作為<img>元素的src屬性插入。