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. 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.
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
}
?>
P.S. I removed the style part so you can see the back-end.
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. So if I want to store images for the product that has id=25, images will be in this path: "images/25/"
Thanks for helping me, I relly need to find a method to solve this problem.
Aucun commentaire:
Enregistrer un commentaire