0

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);
4

2 に答える 2

4

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-25T15:21:46.497 に答える
0

ajax を使用して生の jpeg データを取得しようとしています。ajax アップロードを実行するのではなく、フォームを直接送信してサイズ変更された画像を表示する必要があります。これが望ましくない場合は、生の jpeg データを base64 でエンコードされたデータ URL にエンコードし、それを要素のsrcプロパティとして挿入する必要があり<img>ます。

于 2012-12-25T15:30:50.843 に答える