Question

我为电子商务网站制作了一个页面，如果你想添加图片，你可以选择它们，然后将所有内容上传到服务器。问题是（就像我在标题中提到的那样）他向我展示了在我刷新页面之前和之后上传的图像，它显示了正确的页面。我alredy尝试使用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>

很抱歉，如果代码很长且没有很好的缩进，但我搞砸了代码格式：）

顺便说一下，我知道代码有点长，所以我会告诉你我回应照片的部分：

<?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。我删除了样式部分，以便您可以看到后端。

我将我的图片存储在目录＆＃39; images＆＃39;然后在一个目录中，该目录的名称是我要链接图像的产品的ID。因此，如果我想存储id = 25的产品的图像，图像将在此路径中：＆＃34; images / 25 /＆＃34;

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

Answer 1

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

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

1 个答案: