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

Question

我在一个电子商务网站上做了一个页面，如果要添加图像，请选择该页面，然后将所有内容上传到服务器。 问题是（就像我在标题上提到的那样），他向我显示了之前上传的图像，当我刷新页面时，它显示了正确的图像。 我已经尝试使用javascript制作location.reload（），但我不喜欢他必须两次加载页面的事实。 我还注意到，在手机和平板电脑（通过与我的PC相同的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>

抱歉，如果代码很长且缩进不好，但我搞砸了以使其适合代码格式:)

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

<?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
    }
?>

PS我删除了样式部分，以便您可以看到后端。

我将图像存储在“图像”目录中，然后存储在具有要链接图像的产品ID名称的目录中。 因此，如果我要为id = 25的产品存储图像，则图像将在以下路径中：“ images / 25 /”

感谢您的帮助，我非常需要找到一种解决此问题的方法。

Answer 1

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-06-18 21:34:22

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-06-18 21:34:22

解决方案1
0 已采纳 2016-06-18 21:34:22