如何使用cropperJS, jQuery和PHP在图像成功上传和bootstrap模型关闭后刷新当前页面?

Question

我使用cropperJS, jquery和php上传裁剪图像。我面临的问题是，当上传完成，模态关闭自己，页面上的显示图片不改变，除非我刷新页面。我想要的图像上传页面上有模态，上传后刷新。我如何实现这个

下面是jQuery代码

$('#crop').click(function(){
canvas = cropper.getCroppedCanvas({
width:300,
height:300
});
canvas.toBlob(function(blob){
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function(){
var base64data = reader.result;
$.ajax({
url:'display_upload.php',
method:'POST',
data:{image:base64data},
success:function(data)
{
$modal.modal('hide');
$('#uploaded_image').attr('src', data);
}
});
};
});
});

And Here is the PHP &mySQL代码

<?php
$query = "UPDATE users SET display_pic = '$image_name' WHERE email = '$email'";
$data = mysqli_query($connec,$query); 
}
// If upload completes refresh the page | Can use PHP Header Location Too
if($data)
{      
echo('<meta http-equiv="refresh" content="1; URL=profile.php?message=success"> ');
}
else {
echo('<script> alert("Failed");</script>');
}
?>

Answer 1

//为什么不回显一个脚本来重新加载页面呢?

<?php
$query = "UPDATE users SET display_pic = '$image_name' WHERE email = '$email'";
$data = mysqli_query($connec,$query); 
}
// If upload completes refresh the page | Can use PHP Header Location Too
if($data)
{      
echo('<script> location.reload() </script>');
}
else {
echo('<script> alert("Failed");</script>');
}
?>