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

我有下面的PHP代码来调整图像的大小（我知道这个图像将是png，所以不需要检查…）

但是，我希望能够通过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]”）。每个（函数（）{
$.ajax({
类型：“POST”，
url:“/image resize.php”，
数据：{
原件：$（this.attr（“数据img src”）
},
数据类型：“html”，
成功：功能（结果）{
$（此）.append（结果）；
}
});
});

你知道我需要做什么才能让这一切顺利吗

编辑

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

$("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
});

$（“div[data img src]”）。每个（函数（）{
$（此）。追加（“”）；
//再加上php中的$\u GET
});

此

在ajax函数的上下文中不引用元素。您可以使用以下代码更正此问题：

$("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？

为什么不使用TimThumb？老实说，看起来根本不需要AJAX请求服务器

这段代码的作用是：在页面上创建一个隐藏的img，将其宽度和高度存储为变量，计算出哪个更大（宽度或高度），然后返回一个裁剪的img

要使此代码正常工作，您的基本目录中需要timtumb.php。我已经将您原来的DIV元素更改为IMG元素，因为很明显，DIV无法接收要转换为图像的SRC属性（当然，您可以更改下面的代码，将图像作为DIV的背景图像输出）

$（“img[data img src]”）。每个（函数（）{
imgSrc=$（this）.attr（“数据img src”）；
$（'body'）。追加（''）；
imgWidth=$（'.hidden img'）.outerWidth（）；
imgHeight=$（'.hidden img'）.outerHeight（）；
imgString='/timtumb.php？src='+imgSrc；
如果（imgWidth>imgHeight）{
imgString=imgString+'&h=200&q=90'；
}否则{
imgString=imgString+'&w=200&q=90'；
}
$（'.hidden img'）.remove（）；
$（'body'）。追加（''）；
});

您可以轻松地从php文件返回新的图像路径（如果您创建并保存了一个新的图像路径）。例如，使用JSON:echo JSON_encode（数组（“new_path”=>“my/new/path”）；然后在成功回调中使用它，比如result.new_path，但不要忘记在ajax调用中添加dataType:json您使用的

元素
其中
此
引用了该元素，并将
$（此）放在未引用的位置。追加（result）
。
$("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);
    }
  });
});

$("img[data-img-src]").each( function() {
    imgSrc = $(this).attr("data-img-src");
    $('body').append('<img class="hidden-img" src="'+imgSrc+'" style="visibility:hidden;>');
    imgWidth = $('.hidden-img').outerWidth();
    imgHeight = $('.hidden-img').outerHeight();
    imgString = '/timthumb.php?src='+imgSrc;
    if(imgWidth > imgHeight){
        imgString = imgString+'&h=200&q=90';
    } else {
        imgString = imgString+'&w=200&q=90';
    }
    $('.hidden-img').remove();
    $('body').append('<img src="'+imgString+'">');
});
</script>