我正在創建一個簡單的畫廊,我有一個資料庫,以便我可以上傳、更新和洗掉圖片。上傳、更新和洗掉已經開始作業了。但我在更新方面遇到了問題,因為每次我更新一張圖片時,我也需要更新所有的圖片。
我的問題是,我怎樣才能在不更新所有圖片的情況下更新一張圖片?
我認為問題出在我的javascript上,但我對它不是很熟悉,所以我搞不清楚。我也搜索了可能的解決方案,但還是想不出來,這就是為什么我在這里問。
HTML表格
< form class="form-valide"/span> method="post" action="edit_query_maingallery. php? photo_id=< ? php echo $fetch['photo_id']? >" enctype="multipart/form-data">
<div class="form-group row"/span>>
< 標簽 class="col-lg-4 col-form-label"/span> for="val-digits"/span>> 照片描述用于畫廊。<span class="text-danger"/span>> *</span></label>
<div class="col-lg-6">/span>
< textarea name="photo_description" placeholder="Description" required=" rows="4" cols="50"> <? php echo $fetch['photo_description']? ></textarea>>
</div>/span>
</div>/span>
<div class="form-group row">
< 標簽 class="col-lg-4 col-form-label"/span> for="val-digits"/span>> 主畫廊預覽。<span class="text-danger"/span>> </span></label>
<div class="col-lg-6">/span>
<label>主照片 </label>
<div id = "預覽" 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"/span> required = "required" id = "photo" name = "photo" />
</div>
</div>/span>
<div class="form-group row">
< 標簽 class="col-lg-4 col-form-label"/span> for="val-digits"/span>> 主畫廊預覽1。<span class="text-danger"/span>> *</span></label>
<div class="col-lg-6">/span>
<label>照片1 </label>
<div id = "preview1"/span> 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"/span> required = "required" id = "photo1" name = "photo1" />
</div>
</div>/span>
<div class="form-group row">
< 標簽 class="col-lg-4 col-form-label"/span> for="val-digits"/span>> 主畫廊預覽2。<span class="text-danger"/span>> *</span></label>
<div class="col-lg-6">/span>
<label>照片 2 </label>
<div id = "預覽2" 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"/span> required = "required" id = "photo2" name = "photo2" />
</div>
</div>/span>
<div class="form-group row">
< 標簽 class="col-lg-4 col-form-label"/span> for="val-digits"/span>> Main Gallery Preview 3: <span class="text-danger"/span>> *</span></label>
<div class="col-lg-6">/span>
<label>照片3 </label>/span>
<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"/span> required = "required" id = "photo3" name = "photo3" />
</div>
</div>/span>
<div class="form-group row">
< 標簽 class="col-lg-4 col-form-label"/span> for="val-digits"/span>> Main Gallery Preview 4: <span class="text-danger"/span>> *</span></label>
<div class="col-lg-6">/span>
<label>照片 4 </label>
<div id = "preview4"/span> 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"/span> required = "required" id = "photo4" name = "photo4" />
</div>
</div>/span>
<div class="form-group row">
<div class="col-lg-8 ml-auto"/span>>
< button type="submit" class="btn btn-success" name="edit_maingallery"> 更新</按鈕>
< button class="btn btn-danger" name="cancel" > <a href="view_maingallery. php">取消</a></button>
</div>
</div>/span>
</form>
JavaScript
$(document).ready(function){
$pic = $('<img id = "image" width = "100%" height = "100%"/> ')。
$lbl = $('<center id = "lbl">[Photo]</center> ');
$("#photo").change(function() {
$("#lbl"/span>).remove()。
var files = !this.files ? this.files : [];
if(!files.length || !window.FileReader){
$("#image"/span>).remove()。
$lbl.appendTo("#preview") 。
}
if(/^image/.test)(files[0].type){
var reader = new FileReader()。
reader.readAsDataURL(files[0] )。
reader.onloadend = function(){
$pic.appendTo("#preview"/span>)。
$("#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"/span>).remove()。
$lbl1.appendTo("#preview1")。
}
if(/^image/.test(files[0].type)){
var reader = new FileReader()。
reader.readAsDataURL(files[0] )。
reader.onloadend = function(){
$pic1.appendTo("#preview1"/span>)。
$("#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"/span>).remove()。
$lbl2.appendTo("#preview2")。
}
if(/^image/.test(files[0].type)){
var reader = new FileReader()。
reader.readAsDataURL(files[0] )。
reader.onloadend = function(){
$pic2.appendTo("#preview2"/span>)。
$("#image2").attr("src", this.result) 。
}
}
});
});
$(document).ready(function(>/span>){
$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"/span>).remove()。
$lbl3.appendTo("#preview3")。
}
if(/^image/.test(files[0].type)){
var reader = new FileReader()。
reader.readAsDataURL(files[0] )。
reader.onloadend = function(){
$pic3.appendTo("#preview3"/span>)。
$("#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"/span>).remove()。
$lbl4.appendTo("#preview4")。
}
if(/^image/.test(files[0].type)){
var reader = new FileReader()。
reader.readAsDataURL(files[0] )。
reader.onloadend = function(){
$pic4.appendTo("#preview4"/span>)。
$("#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` = '"/span>. $_GET['photo_id']." '";
if ($conn->query($sq1) === TRUE) {
$_SESSION['success']=' 記錄成功更新。
? >
<script type="text/javascript">
window.location="view_maingallery.php"。
</script>
<?php?
} else {
$_SESSION['error'/span>]='Something Went Wrong'/span>。
? >
<script type="text/javascript">
window.location="view_maingallery.php"。
</script>
<?php?
}
}
? >
uj5u.com熱心網友回復:
你的SQL目前正在用空白值覆寫你現有的影像。
你需要更新你的查詢,在你把每張照片添加到查詢中之前檢查它是否是空的。
現有查詢:
$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` = '"/span>. $_GET['photo_id']."' "。
新查詢:
$sql="UPDATE `gallery` SET `photo_description` = '$photo_description'"。
if(!empty($photo_name) $sql.=", `photo` = '$photo_name' "/span>;
if(!empty($photo_name1) $sql.=", `photo1` = '$photo_name1' "/span>;
if(!empty($photo_name2) $sql.=", `photo2` = '$photo_name2' "/span>;
if(!empty($photo_name3) $sql.=", `photo3` = '$photo_name3' "/span>;
if(!empty($photo_name4) $sql.=", `photo4` = '$photo_name4' "/span>;
$sql.="WHERE `photo_id` = '"。 $_GET['photo_id']." '"。
你還把你的變數稱為 "sq1",而不是 "sql",一個使用數字1,另一個使用小寫的L,只是為了方便使用,最好使用字母L,所以除了復制上面的內容外,你還需要改變這里的變數名稱:
if ($conn-> query($sq1) ==TRUE)
to:
if ($conn->query($sql) ==TRUE)
uj5u.com熱心網友回復:
你應該重構你的代碼。你的代碼里有很多亂七八糟的東西。
首先,你應該洗掉HTML、JS、PHP檔案中重復的代碼。
對于HTML檔案。請為帶有圖片的行創建一個模板:
< div class="form-group row"/span>>
< 標簽 class="col-lg-4 col-form-label"/span> for="val-digits"/span>> 主畫廊預覽。<span class="text-danger"/span>> </span></label>
<div class="col-lg-6">/span>
<label>主照片 </label>
<div id = "預覽" 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"/span> required = "required" id = "photo" name = "photo" />
</div>
對于JS檔案。請創建一個函式來與你的行進行互動。
$(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"/span>).remove()。
$lbl3.appendTo("#preview3")。
}
if(/^image/.test(files[0].type)){
var reader = new FileReader()。
reader.readAsDataURL(files[0] )。
reader.onloadend = function(){
$pic3.appendTo("#preview3"/span>)。
$("#image3").attr("src", this.result) 。
}
}
});
});
你應該只傳遞一個引數rowId。
對于PHP代碼。你應該在你的畫廊中創建上傳圖片的函式。并呼叫該方法,如uploadImageToGallery($imageId)。
function uploadImageToGallery(span class="hljs-variable">$imageId) {
$photo = addslashes(file_get_contents($_FILES['photo'/span> . $imageId]['tmp_name'])。
$photo_name = addslashes($_FILES['photo'/span>] . $imageId]['name'])。)
$photo_size = getimagesize($_FILES['photo'/span>] . $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)
}
這是個例子。你應該如何重構你的代碼!
P.S. 你應該檢查陣列$_FILES的哪個元素存在,并對陣列$_FILES的那個元素應用該方法。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/332009.html
標籤:
下一篇:當出現兩個破折號后如何回傳字符

