PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, September 8, 2022

[FIXED] How to refresh current page after image successfully uploads and bootstrap model closes using cropperJS, jQuery and PHP?

 September 08, 2022     ajax, cropperjs, javascript, jquery, php     No comments   

Issue

I am using cropperJS, jquery and php to upload cropped images. The problem I am facing is that when the upload completes and the modal closes by itself, the display picture on page doesn't change unless I refresh the page. I want the image upload page that has modal on it, to be refreshed after upload. How can I implement this

Here is the jQuery code

$('#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 Code

<?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>');
}
?>

Solution

//why dont u echo a script to reload the page instead ?

<?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>');
}
?>


Answered By - Timileyin Oluwayomi
Answer Checked By - Katrina (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing