Question

我已经上传了图像并用croppie对其进行了裁剪，该图像成功更新了数据库并成功进入了目录。

，但是新图像将覆盖相同名称的旧图像，这是有意完成的。但是php再次显示的图像仍然是旧图像（该图像已被新图像覆盖）

最初没有问题，但是当我没有打开项目超过2周时，就出现了上述问题

HTML标记

<div class="col-sm-3">
    <h4>Profile Picture</h4>
    <hr>
     <form action="" id="form" method="post">
       <label class="cabinet center-block">
         <figure><img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
         <figcaption><i class="fa fa-camera"></i></figcaption>
         </figure>
         <input type="file" class="item-img file center-block" name="file_photo"/>
        </label>
      </form>
</div>

带有CROPPIE的JS

<script type="text/javascript">
        // Start upload preview image
        $(".gambar").attr("src", "../profile/pictures/img/<?=$profile['profile']?>");
        var $uploadCrop,
        tempFilename,
        rawImg,
        imageId;
        function readFile(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('.upload-demo').addClass('ready');
                    $('#cropImagePop').modal('show');
                    rawImg = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
            else {
                swal("Desculpe, seu navegador não suporta o FileReader API.");
            }
        }

        $uploadCrop = $('#upload-demo').croppie({
            viewport: {
                width: 230,
                height: 230,
            },
            enforceBoundary: false,
            enableExif: true
        });
        $('#cropImagePop').on('shown.bs.modal', function(){
            // alert('Shown pop');
            $uploadCrop.croppie('bind', {
                url: rawImg
            }).then(function(){
                console.log('jQuery bind complete');
            });
        });

        $('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
            $('#cancelCropBtn').data('id', imageId); readFile(this); });
        $('#cropImageBtn').on('click', function (ev) {
            $uploadCrop.croppie('result', {
                type: 'base64',
                format: 'jpeg',
                size: {width: 270, height: 270}
            }).then(function (resp) {
                $('#item-img-output').attr('src', resp);
            //$('#cropImagePop').modal('hide');
                $.ajax({
                    url: "../lib/proses/upload.php",
                    type: "POST",
                    data: {"image":resp},
                    success: function (data) {
                        html = '<img src="' + resp + '" />';
                        $("#upload-image-i").html(html);
                        $('#cropImagePop').modal('hide');
                        swal.fire(
                            'Berhasil !',
                            'Profile berhasil diubah',
                            'success'
                        )
                    }
                });
            $('#cropImagePop').modal('hide');
            });
        });
        // End upload preview image  

    </script>

上传过程

<?php 
    session_start();
    require "../koneksi.php";

    $username = $_SESSION['username'];

    $croped_image = $_POST['image'];
    list($type, $croped_image) = explode(';', $croped_image);
    list(, $croped_image)      = explode(',', $croped_image);
    $croped_image = base64_decode($croped_image);
    $image_name = $username.'.png';

    // insert name to database
    $sql = "UPDATE users SET profile = '$image_name' WHERE username = '$username'";
    $query = mysqli_query($conn, $sql);

    // upload cropped image to server 
    file_put_contents('../../profile/pictures/img/'.$image_name, $croped_image);
?>

我希望新上传的图像显示为替换中的旧图像显示图像的文件（例如索引文件等）

Answer 1

您是否检查过浏览器缓存？也许尝试向图像路径添加随机参数，例如myimage.jpg？c = [randomNumber]，这将迫使浏览器再次下载图像。

Answer 2

清除缓存，您使用的是PHP框架吗？

在更新并使用新图像上传后，图像保持不变

2 个答案: