当我尝试显示一张上传的图片时 html 显示另一张，但如果我刷新页面，它会显示正确的一张

Question

我为一个 e-commerce 网站制作了一个页面，如果您想添加图像，您可以 select 然后将所有内容上传到服务器。问题是（就像我在标题中提到的那样）他向我展示了之前上传的图片，当我刷新页面时它显示了正确的图片。我已经尝试用 javascript 制作一个 location.reload() 但我不喜欢他必须加载页面两次的事实。我还注意到，在手机和平板电脑上（与我的电脑同一 wi-fi 连接）上传图片需要很多时间。

代码如下：

<html>
 <head>
 </head>
 <body>
 <div class="container">
  <div id="ctn1">
    <form enctype="multipart/form-data" method="post" action="aggiungi_immagini.php">
      <div class="fileUpload btn btn-primary">
        <span>Seleziona Immagini</span>
        <input id="uploadBtn" class="upload" type="file" name="files[]" multiple>
      </div>
      <input id="uploadFile" placeholder="Nessun File selezionato" disabled="disabled" /><br>
      <input type="submit" value="Carica" class="btn btn-primary">
    </form><br>
    <?php
    $files = array();
    foreach (new DirectoryIterator('images/'.$_SESSION['prodid'].'/') as $fileInfo) {
        if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
        $files[] = $fileInfo->getFilename();
    }
    foreach ($files as $filename) {

    ?>
      <style>
        #imagelisticon{
          color: rgba(255, 255, 255, 0.5);
          position: absolute;
          margin-left:-100px;
          z-index: 2;
          background-color: rgba(0, 0, 0, 0.2);
          line-height: 200px;
          height: 200px;
          width:200px;
          font-size: 40px;
        }
        #imgcnt{
          background-size: cover;
          background-repeat: no-repeat;
          position:relative;
          margin-top:40px;
          width:200px;
          height:200px;
          display: inline-block;
          border: 1px solid lightgrey;
          line-height: 198px;
          overflow: hidden;
        }
        .trash{
          position: absolute;
          vertical-align: text-top;
          margin-top: 5px;
          margin-left: 50px;
          z-index:3;
        }
      </style>
        <div id="imgcnt" style="background-image: url('images/<?php echo $id;?>/<?php echo $filename;?>');">
          <div id="<?php echo $filename;?>" class="btn btn-danger trash"><i class="fa fa-trash" aria-hidden="true"></i></div>
          <i id="imagelisticon" class="fa fa-check" aria-hidden="true"></i>
        </div>
    <?php
        }
    ?></div><br>
      <center><a href="modifica_prodotto.php"><div class="btn btn-success">
      Conferma
    </div></a></center><?php
    $valid_formats = array("gif","jpg","jpeg","png","wbmp","bmp","webp","xbm","xpm");
    $max_file_size = 80*1024^2; //10 MB
    $path = "images/".$_SESSION['prodid']."/"; // Upload directory
    $count = 1;
    $picid=$id;
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
        // Ripeto per ogni file caricato
      ?><div id="ctnmultiimages" style="heigth:300px;"><?php
        foreach ($_FILES['files']['name'] as $f => $name) {
            if ($_FILES['files']['error'][$f] == 4) {
                continue; // Salto se ci sono stati errori
            }
            if ($_FILES['files']['error'][$f] == 0) {
                if ($_FILES['files']['size'][$f] > $max_file_size) {
                    $message[] = "$name is too large!.";
                    continue; // Salto per i formati troppo grandi
                }
                elseif( ! in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats) ){
                    $message[] = "$name is not a valid format";
                    continue; // Salto per i formati non validi
                }
                else{ // Nessun errore, sposta i file
                $kaboom = explode(".", $name); // Split file name into an array using the dot
                $fileExt = end($kaboom);
                if(move_uploaded_file($_FILES["files"]["tmp_name"][$f], "images/".$id."/".$name)){
                $count++;
            }
            }
        }

    }?>

        <?php
    }


?>


</body>
</html>
<script>
document.getElementById("uploadBtn").onchange = function () {
  document.getElementById("uploadFile").value = this.value;
};
$("DIV[class='btn btn-danger trash']").click(function(){
    var delfile = ($(this).attr("id"))
      $.ajax({
        type: 'post',
        url: 'delete.php',
        data: {
            source1: delfile
        },
        success: function( data ) {
            console.log( data );
        }
    });
})

</script>

抱歉，如果代码很长而不是 well-indentated，但我搞砸了以适应代码格式:)

顺便说一句，我知道代码有点长，所以我将向您展示我附和图片的部分：

<?php
$files = array();
foreach (new DirectoryIterator('images/'.$_SESSION['prodid'].'/') as $fileInfo) {
    if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
    $files[] = $fileInfo->getFilename();
}
foreach ($files as $filename) {

?>
    <div id="imgcnt" style="background-image: url('images/<?php echo $id;?>/<?php echo $filename;?>');">
      <div id="<?php echo $filename;?>" class="btn btn-danger trash"><i class="fa fa-trash" aria-hidden="true"></i></div>
      <i id="imagelisticon" class="fa fa-check" aria-hidden="true"></i>
    </div>
<?php
    }
?>

P.S。我删除了样式部分，以便您可以看到 back-end。

我将我的图像存储在目录 'images' 中，然后存储在具有我想要的产品 ID 名称的目录中 link 图像。因此，如果我想为 id=25 的产品存储图像，图像将位于此路径中："images/25/"

感谢您的帮助，我真的需要找到解决这个问题的方法。

Answer 1

它不会立即显示您上传的图片，因为负责上传的代码是在显示图片之后。这意味着您首先在您的目录中显示图像，然后将新图像上传到该目录。你想要的是先上传然后显示图像，所以将你的上传代码移动到文件的开头或者就在你的第一个 foreach 循环之上。

当我尝试显示一张上传的图片时 html 显示另一张，但如果我刷新页面，它会显示正确的一张

When I try to show an uploaded image html shows me another one but if I refresh the page it shows me the right one

html

php

ftp

image

uploading