J'ai fait une page pour un site e-commerce où si vous voulez ajouter des images vous les sélectionnez et vous télécharger tout sur le serveur. Le problème est (comme je l'ai mentionné sur le titre) qu'il me montre des images téléchargées avant et quand je rafraîchis la page il affiche le bon. J'ai déjà essayé de faire un location.reload() avec javascript mais je n'aime pas le fait qu'il doit charger la page deux fois. Aussi, j'ai remarqué que sur les téléphones mobiles et sur la tablette (connecté au même wi-fi de mon PC), il faut beaucoup de temps pour télécharger des images.Quand j'essaie d'afficher une image téléchargée, html m'en montre une autre mais si je rafraîchis la page elle me montre la bonne
Voici le 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>
Désolé si le code est long et bien indentated mais je foiré pour l'adapter au format de code :)
Par la façon dont je connais le code est un peu long donc je vais vous montrer la partie où je fais écho les photos:
<?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 J'ai enlevé la partie style afin que vous puissiez voir le back-end.
Je stocke mes images dans le répertoire 'images', puis dans un répertoire portant le nom de l'identifiant du produit auquel je souhaite lier des images. Donc, si je veux stocker des images pour le produit qui a id = 25, les images seront dans ce chemin: "images/25 /"
Merci de m'aider, j'ai besoin de trouver une méthode pour résoudre ce problème.
Merci l'homme! Savez-vous pourquoi cela prend autant de temps pour télécharger des images depuis un mobile? – valbuxvb
C'est difficile à dire. La seule chose à laquelle je peux penser est la distance entre vous et votre routeur Wi-Fi. Si vous êtes loin, le signal peut être trop faible et entraîner un téléchargement lent. Si ce n'est pas le cas et que votre mobile se trouve près du routeur pendant le téléchargement, je n'en ai aucune idée. – Koern