顯示上傳的圖像

我想使用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);

來源

2012-12-25 slier

以及回聲'「」;'在你的PHP文件 –

OP沒有保存圖像，這樣映像路徑無關 – Popnoodles

在你的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); 
}

來源

2012-12-25 15:21:46 Popnoodles

修復錯字，垃圾的AJAX回一堆 – slier

讓我試試這個 – slier

得到了圖像，但有一堆垃圾.. – slier

你試圖使用ajax.You不應執行一個Ajax上傳，而是直接發送的形式，以獲得原始JPEG數據看到調整大小的圖像。如果這不是您想要的，那麼您需要將原始jpeg數據編碼爲base64編碼的數據url，並將其插入爲<img>元素的src屬性。

來源

2012-12-25 15:30:50 Licson

顯示上傳的圖像

回答

相關問題