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

我为电子商务网站制作了一个页面，如果您要添加图像，请选择它们，然后选择将所有内容上传到服务器。问题是（就像我在标题中提到的那样），他向我展示了在我刷新页面之前上传的图像，并显示了正确的图像。我试图用javascript做一个location.reload（），但我不喜欢他必须加载页面两次的事实。另外我注意到，在手机和平板电脑上（连接在我的电脑的相同Wi-Fi上），上传图像需要很长时间。当我尝试显示上传的图片时，html显示另一个图片，但如果我刷新页面，则会显示正确的页面

下面的代码：

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

很抱歉，如果代码是漫长的，没有很好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 
    } 
?>

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

我将我的图像存储在目录'图像'，然后在一个目录中有我想要链接图像的产品的ID的名称。所以如果我想存储具有id = 25的产品的图像，图像将位于以下路径：“images/25 /”

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

来源

2016-06-18 valbuxvb

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

来源

2016-06-18 21:34:22 Koern

谢谢你！你知道为什么需要这么长时间才能从手机上传图片吗？ – valbuxvb

这很难说。我能想到的唯一的事情就是你和你的Wi-Fi路由器之间的距离。如果你距离很远，信号可能太弱，可能导致上传缓慢。如果情况并非如此，并且您的手机在上传时位于路由器附近 - 我不知道。 – Koern

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

回答

相关问题