当我尝试显示上传的图像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
问题描述
I made a page for an e-commerce website where if you want to add images you select them and you upload everything to the server. 
我在一个电子商务网站上做了一个页面，如果要添加图像，请选择该页面，然后将所有内容上传到服务器。 The problem is (like I mentioned on the title) that he shows me images uploaded before and when I refresh the page it displays the right one. 问题是（就像我在标题上提到的那样），他向我显示了之前上传的图像，当我刷新页面时，它显示了正确的图像。 I alredy tried to make a location.reload() with javascript but I don't like the fact that he has to load the page twice. 我已经尝试使用javascript制作location.reload（），但我不喜欢他必须两次加载页面的事实。 Also I noticed that on mobile phones and on tablet (connected at the same wi-fi of my pc) it takes a lot of time to upload images. 我还注意到，在手机和平板电脑（通过与我的PC相同的wi-fi连接）上，上传图像需要花费大量时间。
Here's the code: 这是代码：
<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>
Sorry if the code is long and not well-indentated but I screwed up to fit it in the code format :) 抱歉，如果代码很长且缩进不好，但我搞砸了以使其适合代码格式:)
By the way I know the code is a little long so I'll show you the part where I echo the pics: 顺便说一句，我知道代码有点长，所以我将向您展示我回显图片的部分：
<?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 I removed the style part so you can see the back-end. PS我删除了样式部分，以便您可以看到后端。
I store my images in the directory 'images' and then in a directory that has the name of the id of the product I want to link images. 我将图像存储在“图像”目录中，然后存储在具有要链接图像的产品ID名称的目录中。 So if I want to store images for the product that has id=25, images will be in this path: "images/25/" 因此，如果我要为id = 25的产品存储图像，则图像将在以下路径中：“ images / 25 /”
Thanks for helping me, I relly need to find a method to solve this problem. 感谢您的帮助，我非常需要找到一种解决此问题的方法。
1 个解决方案
解决方案1
0 已采纳 2016-06-18 21:34:22
It doesn't show your uploaded images immediately because the code responsible for uploading is after displaying images. 它不会立即显示您上传的图像，因为负责上传的代码是在显示图像之后进行的。 That means you first display images in your directory then uploading new images to this directory. 这意味着您首先在目录中显示图像，然后将新图像上传到该目录。 The thing you want is you first upload and then display images, so move your upload code at the beginning of the file or simply above your first foreach loop. 您想要的是先上传然后显示图像，因此将上传代码移动到文件的开头或仅位于第一个foreach循环的上方。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.