AJAX重新加载旋转图像

Question

I'm currently using this: https://stackoverflow.com/a/24312826/1654748 to rotate my images.

I'm also using header('Location: url.php'); to redirect to the previous page, but the problem is, only about 30% of the time it reloads the rotated image.

The way I display the images is like this:

$result = mysql_query("SELECT * FROM `media` ORDER BY `id` DESC") or die(mysql_error());

while($row = mysql_fetch_array($result)) {
  echo '<div class="col-lg-3 imgauto">';
  echo '<div class="imagepad">';
  echo '<img src="uploads/'.$row['image'].'">';
  echo '</div>';
  echo '<a href="deletemedia.php?id='.$row['id'].'" data-href="deletemedia.php?id='.$row['id'].'" class="btn btn-danger imagecontrols imgdel" data-toggle="confirmation"><i class="fa fa-close"></i></a>';
  echo '<a href="#" class="btn btn-warning imagecontrols imgedit" data-toggle="modal" data-target="#myModal" href="#"><i class="fa fa-edit"></i></a>';
  echo '<form action="rotateimage.php" method="post">';
  echo '<input name="image" type="hidden" value="uploads/'.$row['image'].'">';
  echo '<button name="save" type="submit" class="btn btn-warning imagecontrols imgrotate"><i class="fa fa-rotate-right"></i></button>';
  echo '</form>';
  echo '</div>';
}

Is it possible to acheive the form action rotateimage.php without a page refresh, and reload the modified image with AJAX?

Answer 1

Put the form or button inside your main .php page (i.e. index.php) and the function that rotates the image and saves it in a separate php file (i.e. rotateImage.php) then use an ajax call to call rotateImage.php

$("#flipPicture").click(function()
{
    $.ajax({
        type:"POST",
        data{postVar:myVar}, //includes whatever variables you want to pass to your rotateImage.php page
        url:"rotateImage.php",
        success: function(data)
                 {
                     $("#imgContainer").html(data);
                 }
    });
});

where #flipPicture points to the id of the (say a button) element that rotates the picture and "data" is whatever your rotateImage.php echo's (your image flipped) and "#imgContainer" is the container for which the image will be placed (code from rotateImage.php)