Uploaded image after cropping not refreshed using codeigniter

Question

We have implemented image crop in our codeigniter application. It is uploading the image correctly using jquery ajax, but not displaying correctly in the page after uploading. It shows old image. After one page refresh only, new one is displaying.

We have added page refresh, redirect methods to refresh the page after upload, but not working.

I tried,

header("Location:".$_SERVER['HTTP_REFERER']);
window.location.reload();

It is working fine in local server. In server, refresh not working. Can any one make a solution for this...?

<script type="text/javascript">
window.onload = function() {
    var options =
    {
        imageBox: '.imageBox',
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: 'avatar.png'
    }
    var cropper = new cropbox(options);
    document.querySelector('#file').addEventListener('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = new cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    document.querySelector('#btnCrop').addEventListener('click', function(){
        var img = cropper.getDataURL();

        var simple = '<?php echo base_url(); ?>';
        var member_id ='<?php echo $this->session->userdata('current_member');?>';
        $.ajax({url: simple + 'admin/admin_home/membercrop',
            type: "POST",
            async: false,
            data: {
                "image": img
            },
            success: function (data) {

              window.location.reload();

            },
            error: function (error) {
                alert('error');
            }
        });

    })
    document.querySelector('#btnZoomIn').addEventListener('click', function(){
        cropper.zoomIn();
    })
    document.querySelector('#btnZoomOut').addEventListener('click', function(){
        cropper.zoomOut();
    })

};

</script>

Answer 1

解决方案是在图像后面添加时间戳，这将防止缓存：

<img src="test.jpg?t=<?=date('U')?>" />