javascript - PHP 在服务器上调整图像大小并通过 ajax 返回

Question

我有以下 PHP 代码来调整图像大小(我知道该图像将是 png，因此无需检查...)

// The file
//$filename = $_POST['original'];
$filename = 'planets.png';

// Set a maximum height and width
$width = 200;
$height = 200;

// Content type
header('Content-Type: image/png');

// Get new dimensions
list($width_orig, $height_orig) = getimagesize($filename);

$ratio_orig = $width_orig/$height_orig;

if ($width/$height > $ratio_orig) {
   $width = $height*$ratio_orig;
} else {
   $height = $width/$ratio_orig;
}

// Resample
$image_p = imagecreatetruecolor($width, $height);
imagecreatefrompng($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig);

// Output
imagepng($image_p);

但是，我希望能够通过 ajax 将其返回到我的页面...请参阅下面的代码:

<div data-img-src="planets.png"></div>

<script type="text/javascript">
$("div[data-img-src]").each( function() {
  $.ajax({
    type: "POST",
    url: "/image-resize.php",
    data:  { 
      original: $(this).attr("data-img-src") 
    },
    dataType: "html",
    success: function(result) {
      $(this).append(result);
    }
  });
});
</script>

有什么想法我需要做什么才能完成这项工作吗？

编辑!

或者，这是实现相同预期结果的可接受的方法吗？

$("div[data-img-src]").each( function() {
  $(this).append("<img src='/image-resize.php?original="+$(this).attr("data-img-src")+"' />"); 
  // COUPLED WITH $_GET... in the php
});

Answer 1

ajax 函数上下文中的

this 并不引用该元素。您可以使用以下代码更正此问题:

$("div[data-img-src]").each( function() {
  var element = $(this);
  $.ajax({
    type: "POST",
    url: "/image-resize.php",
    data:  { 
      original: element.attr("data-img-src") 
    },
    dataType: "html",
    success: function(result) {
      element.append(result);
    }
  });
});

另外，你的 PHP 脚本肯定输出 HTML 吗？