0
あなたが選択した画像を追加する場合は、すべてをサーバーにアップロードします。問題は（タイトルに言及したように）前にアップロードした画像を表示し、ページをリフレッシュすると正しい画像が表示されることです。私はalredyがjavascriptでlocation.reload（）を作成しようとしましたが、私は彼がページを2度ロードしなければならないという事実は嫌です。また、私は携帯電話やタブレット（私のPCの同じ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>
申し訳ありませんが、コードがよく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あなたがバックエンドを見ることができるようにスタイル部分を削除しました。
イメージをディレクトリ 'images'に保存してから、イメージのリンク先の製品のIDの名前を持つディレクトリに保存します。したがって、id = 25の商品の画像を保存する場合、画像は次のパスになります。
私はこの問題を解決する方法を見つける必要があります。
ありがとうございました！モバイルから画像をアップロードするのになぜ時間がかかりますか？ – valbuxvb
それは言うのは難しいです。私が考えることができるのはあなたとあなたのWi-Fiルータとの距離だけです。遠く離れていると、信号が弱すぎてアップロードが遅くなる可能性があります。そうでない場合、あなたのモバイルはアップロード中にルータの近くに位置しています - 私は分かりません。 – Koern