显示上传的图像

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

显示上传的图像

回答

相关问题