I'm creating a simple gallery, I have database so that I can upload, update and delete a pictures. The upload, update and delete are already working. But I have problem on my update because every time I update one picture I also need to update all the pictures.
My question is how can I update one picture without updating all the pictures?
I think the problem is on my javascript but I'm not too familiar with it that’s why I can't figure it out. I also searched for possible solutions but still can't figure it out that's why I’m asking here.
HTML Form
<form class="form-valide" method="post" action="edit_query_maingallery.php?photo_id=<?php echo $fetch['photo_id']?>" enctype="multipart/form-data">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="val-digits">Photo Description For Gallery: <span class="text-danger">*</span></label>
<div class="col-lg-6">
<textarea name="photo_description" placeholder="Description" required="" rows="4" cols="50"><?php echo $fetch['photo_description']?></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="val-digits">Main Gallery Preview: <span class="text-danger"></span></label>
<div class="col-lg-6">
<label>Main Photo </label>
<div id = "preview" style = "width:150px; height :150px; border:1px solid #000;">
<img src = "../photo/<?php echo $fetch['photo']?>" id = "lbl" width = "100%" height = "100%"/>
</div>
<input type = "file" required = "required" id = "photo" name = "photo" />
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="val-digits">Main Gallery Preview 1: <span class="text-danger">*</span></label>
<div class="col-lg-6">
<label>Photo 1 </label>
<div id = "preview1" style = "width:150px; height :150px; border:1px solid #000;">
<img src = "../photo/<?php echo $fetch['photo1']?>" id = "lbl1" width = "100%" height = "100%"/>
</div>
<input type = "file" required = "required" id = "photo1" name = "photo1" />
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="val-digits">Main Gallery Preview 2: <span class="text-danger">*</span></label>
<div class="col-lg-6">
<label>Photo 2 </label>
<div id = "preview2" style = "width:150px; height :150px; border:1px solid #000;">
<img src = "../photo/<?php echo $fetch['photo2']?>" id = "lbl2" width = "100%" height = "100%"/>
</div>
<input type = "file" required = "required" id = "photo2" name = "photo2" />
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="val-digits">Main Gallery Preview 3: <span class="text-danger">*</span></label>
<div class="col-lg-6">
<label>Photo 3 </label>
<div id = "preview3" style = "width:150px; height :150px; border:1px solid #000;">
<img src = "../photo/<?php echo $fetch['photo3']?>" id = "lbl3" width = "100%" height = "100%"/>
</div>
<input type = "file" required = "required" id = "photo3" name = "photo3" />
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="val-digits">Main Gallery Preview 4: <span class="text-danger">*</span></label>
<div class="col-lg-6">
<label>Photo 4 </label>
<div id = "preview4" style = "width:150px; height :150px; border:1px solid #000;">
<img src = "../photo/<?php echo $fetch['photo4']?>" id = "lbl4" width = "100%" height = "100%"/>
</div>
<input type = "file" required = "required" id = "photo4" name = "photo4" />
</div>
</div>
<div class="form-group row">
<div class="col-lg-8 ml-auto">
<button type="submit" class="btn btn-success" name="edit_maingallery">Update</button>
<button class="btn btn-danger" name="cancel"><a href="view_maingallery.php">Cancel</a></button>
</div>
</div>
</form>
JavaScript
$(document).ready(function(){
$pic = $('<img id = "image" width = "100%" height = "100%"/>');
$lbl = $('<center id = "lbl">[Photo]</center>');
$("#photo").change(function(){
$("#lbl").remove();
var files = !!this.files ? this.files : [];
if(!files.length || !window.FileReader){
$("#image").remove();
$lbl.appendTo("#preview");
}
if(/^image/.test(files[0].type)){
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function(){
$pic.appendTo("#preview");
$("#image").attr("src", this.result);
}
}
});
});
$(document).ready(function(){
$pic1 = $('<img id = "image1" width = "100%" height = "100%"/>');
$lbl1 = $('<center id = "lbl1">[Photo]</center>');
$("#photo1").change(function(){
$("#lbl1").remove();
var files = !!this.files ? this.files : [];
if(!files.length || !window.FileReader){
$("#image1").remove();
$lbl1.appendTo("#preview1");
}
if(/^image/.test(files[0].type)){
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function(){
$pic1.appendTo("#preview1");
$("#image1").attr("src", this.result);
}
}
});
});
$(document).ready(function(){
$pic2 = $('<img id = "image2" width = "100%" height = "100%"/>');
$lbl2 = $('<center id = "lbl2">[Photo]</center>');
$("#photo2").change(function(){
$("#lbl2").remove();
var files = !!this.files ? this.files : [];
if(!files.length || !window.FileReader){
$("#image2").remove();
$lbl2.appendTo("#preview2");
}
if(/^image/.test(files[0].type)){
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function(){
$pic2.appendTo("#preview2");
$("#image2").attr("src", this.result);
}
}
});
});
$(document).ready(function(){
$pic3 = $('<img id = "image3" width = "100%" height = "100%"/>');
$lbl3 = $('<center id = "lbl3">[Photo]</center>');
$("#photo3").change(function(){
$("#lbl3").remove();
var files = !!this.files ? this.files : [];
if(!files.length || !window.FileReader){
$("#image3").remove();
$lbl3.appendTo("#preview3");
}
if(/^image/.test(files[0].type)){
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function(){
$pic3.appendTo("#preview3");
$("#image3").attr("src", this.result);
}
}
});
});
$(document).ready(function(){
$pic4 = $('<img id = "image4" width = "100%" height = "100%"/>');
$lbl4 = $('<center id = "lbl4">[Photo]</center>');
$("#photo4").change(function(){
$("#lbl4").remove();
var files = !!this.files ? this.files : [];
if(!files.length || !window.FileReader){
$("#image4").remove();
$lbl4.appendTo("#preview4");
}
if(/^image/.test(files[0].type)){
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function(){
$pic4.appendTo("#preview4");
$("#image4").attr("src", this.result);
}
}
});
});
PHP
<?php include('connect.php');?>
$current_date = date('Y-m-d');
if(isset($_POST["edit_maingallery"]))
{
extract($_POST);
$photo_description = $_POST['photo_description'];
$photo = addslashes(file_get_contents($_FILES['photo']['tmp_name']));
$photo1 = addslashes(file_get_contents($_FILES['photo1']['tmp_name']));
$photo2 = addslashes(file_get_contents($_FILES['photo2']['tmp_name']));
$photo3 = addslashes(file_get_contents($_FILES['photo3']['tmp_name']));
$photo4 = addslashes(file_get_contents($_FILES['photo4']['tmp_name']));
$photo_name = addslashes($_FILES['photo']['name']);
$photo_name1 = addslashes($_FILES['photo1']['name']);
$photo_name2 = addslashes($_FILES['photo2']['name']);
$photo_name3 = addslashes($_FILES['photo3']['name']);
$photo_name4 = addslashes($_FILES['photo4']['name']);
$photo_size = getimagesize($_FILES['photo']['tmp_name']);
move_uploaded_file($_FILES['photo']['tmp_name'],"../photo/" . $_FILES['photo']['name']);
$sq1="UPDATE `gallery` SET `photo_description` = '$photo_description', `photo` = '$photo_name', `photo1` = '$photo_name1', `photo2` = '$photo_name2', `photo3` = '$photo_name3', `photo4` = '$photo_name4' WHERE `photo_id` = '".$_GET['photo_id']."'";
if ($conn->query($sq1) === TRUE) {
$_SESSION['success']=' Record Successfully Updated';
?>
<script type="text/javascript">
window.location="view_maingallery.php";
</script>
<?php
} else {
$_SESSION['error']='Something Went Wrong';
?>
<script type="text/javascript">
window.location="view_maingallery.php";
</script>
<?php
}
}
?>
CodePudding user response：
Your SQL is currently overwriting your existing images with blank values.
You need to update your query to check if each photo is empty or not before you add it into the query.
Existing Query:
$sq1="UPDATE `gallery` SET `photo_description` = '$photo_description', `photo` = '$photo_name', `photo1` = '$photo_name1', `photo2` = '$photo_name2', `photo3` = '$photo_name3', `photo4` = '$photo_name4' WHERE `photo_id` = '".$_GET['photo_id']."'";
New Query:
$sql="UPDATE `gallery` SET `photo_description` = '$photo_description'";
if(!empty($photo_name)) $sql.=", `photo` = '$photo_name' ";
if(!empty($photo_name1)) $sql.=", `photo1` = '$photo_name1' ";
if(!empty($photo_name2)) $sql.=", `photo2` = '$photo_name2' ";
if(!empty($photo_name3)) $sql.=", `photo3` = '$photo_name3' ";
if(!empty($photo_name4)) $sql.=", `photo4` = '$photo_name4' ";
$sql.="WHERE `photo_id` = '".$_GET['photo_id']."'";
You're also calling your variable "sq1" and not "sql", one uses the number one and the other uses a lowercase L, just for ease of use it's better to use the letter L, so in addition to copying the above you'll also need to change the variable name here:
if ($conn->query($sq1) === TRUE)
to:
if ($conn->query($sql) === TRUE)
CodePudding user response：
You should refactor your code. You have a lot of mess in your code.
First, you should remove duplicate code in HTML, JS, PHP files.
For HTML file. Please create a template for row with picture:
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="val-digits">Main Gallery Preview: <span class="text-danger"></span></label>
<div class="col-lg-6">
<label>Main Photo </label>
<div id = "preview" style = "width:150px; height :150px; border:1px solid #000;">
<img src = "../photo/<?php echo $fetch['photo']?>" id = "lbl" width = "100%" height = "100%"/>
</div>
<input type = "file" required = "required" id = "photo" name = "photo" />
</div>
For JS file. Please create a function to make interactions with your row.
$(document).ready(function(){
$pic3 = $('<img id = "image3" width = "100%" height = "100%"/>');
$lbl3 = $('<center id = "lbl3">[Photo]</center>');
$("#photo3").change(function(){
$("#lbl3").remove();
var files = !!this.files ? this.files : [];
if(!files.length || !window.FileReader){
$("#image3").remove();
$lbl3.appendTo("#preview3");
}
if(/^image/.test(files[0].type)){
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function(){
$pic3.appendTo("#preview3");
$("#image3").attr("src", this.result);
}
}
});
});
You should pass only one argument rowId.
For PHP code. You should create function for upload image in your gallery. And call that method like uploadImageToGallery($imageId).
function uploadImageToGallery($imageId) {
$photo = addslashes(file_get_contents($_FILES['photo' . $imageId]['tmp_name']));
$photo_name = addslashes($_FILES['photo' . $imageId]['name']);
$photo_size = getimagesize($_FILES['photo' . $imageId]['tmp_name']);
move_uploaded_file($_FILES['photo' . $imageId]['tmp_name'],"../photo/" . $_FILES['photo' . $imageId]['name']);
$sq1="UPDATE `gallery` SET `photo" . . $imageId . "` = '$photo_name' WHERE `photo_id` = '".$_GET['photo_id']."'";
$conn->query($sq1)
}
It's example. How you should refactoring your code!
P.S. You should check which element of array $_FILES exist, and apply that method for that element of array $_FILES.