Question

嘿伙计们我有点问题。

我正在为社交网络撰写个人资料页面。图片上传，到目前为止我已经实现了删除图片按钮。单击该按钮时，ajax告诉php服务器需要删除Web服务器上的哪个文件。该文件成功删除服务器端。当我将新图像上传到同一文件名时，旧的已删除图像显示为客户端，该图像曾经使用相同的名称。

与上传的服务器端相比，错误的图像加载客户端。问题是如此令人困惑我甚至不知道向谁们展示...删除图像的代码，或上传它们的代码。有趣的是，如果我等一会儿，将显示正确的图像。更新的内容似乎有很大的延迟。

我想让它像facebook一样，我可以在不刷新页面的情况下删除个人资料图片，它会删除我删除的确切图像，而不必等待查看更改。此外，如果我删除图像并重新上传新图像，我想看到我重新上传的图像。不是旧图像。

请帮忙??

这是主图像上的配置文件框的代码：

<div id="profilebox" style="margin-top: 50px;" class="col-md-3">

    <?php $path = "images/accounts/$username/1.jpg";

        if(file_exists($path))
        {
            echo "<img  style=\"max-height: 200px; max-width: 300px;\" class=\"col-md-12\" src=\"$path\" />";   
        }
        else
        {
            echo "<img  style=\"\" class=\"col-md-12\" src=\"images/img_placeholder.png\" />";
        }

    ?>








</div>

这是主页上传部分的代码

<div class="tab-pane" id="tab3">
            <h1 style="text-align: center;" class="col-xs-12">Upload photos</h1>

            <form id="upimage" action="member.php">
                <div class="row">
                    <input class="" type="file" name="image">
                </div>
                <button class="btn btn-sm btn-info upload" type="submit">Upload</button>
                <button type="button" class="btn btn-sm btn-danger cancel">Cancel</button>

                <div class="progress progress-striped active">
                    <div class="progress-bar" style="width: 100%"></div>
                </div>


            </form>
        </div>

处理上传的服务器端代码：

<?php 
session_start();
$userid = $_SESSION["userid"];
$username = $_SESSION["username"];
$count = 1;

$tmp_file = $_FILES['image']['tmp_name'];
$filename = $_FILES['image']['name'];
$ext =  end((explode(".", $filename)));


$path = "../images/accounts/".$username."/".$count.".jpg";


if(file_exists($path)) 
{
    while(file_exists($path))
    {
        $count++;
        $path = "../images/accounts/".$username."/".$count.".jpg";
    }


    move_uploaded_file($tmp_file, $path);



}
else
{
    move_uploaded_file($tmp_file, $path);

}






?>

也在php页面的底部得到了这个脚本。

<script>




$('#upimage').submit(function(e){
    e.preventDefault();

    $form = $(this);



    uploadImage($form);



});


function uploadImage($form)
{
    $form.find('.progress-bar')
        .removeClass('progress-bar-success')
        .removeClass('progress-bar-danger');        

    var formdata = new FormData($form[0]); //form element
    var request = new XMLHttpRequest();

    request.upload.addEventListener('progress', function(e){

        var percent = Math.round(e.loaded/e.total * 100);
        $form.find('.progress-bar').width(percent+'%').html(percent+'%');   


    });

    //request completed load event
    request.addEventListener('load', function(e){
        $form.find('.progress-bar').addClass('progress-bar-success').html("Upload Complete!");


        setTimeout(function (){

         //something you want delayed

         window.location.reload(true); 


     }, 2000); // how long do you want the delay to be? 



        });





    request.open('post', 'sections/server.php');
    request.send(formdata); 

    $form.on('click','.cancel', function(e){ 
        request.abort();

        $form.find('.progress-bar')
            .addClass('progress-bar-danger')
            .removeClass('progress-bar-success')
            .html('Upload Aborted.');   





    });


}


</script>

我还可以在以后包含删除代码....只是不确定问题在哪里

Answer 1

要阻止浏览器使用缓存数据 - 请添加到页面标题中：

<meta http-equiv="Cache-Control" content="no-store" />

当您确定上传新图片时，您需要设置＆＃34; src＆＃34;将图像呈现给新网址 - 因此它将更新。

JS / JQuery / PHP /图像不会更新

1 个答案: