當我嘗試顯示上傳的圖像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