1、 該頁面上無圖片，則隱藏圖片區塊，再上傳圖片後顯示預覽
2、該頁面已有圖片，則取得圖片路徑並顯示出來
3、刪除圖片後，隱藏圖片區塊
html：包含一個圖片區塊、一個上傳功能、一張圖片、一個刪除按鈕
<div class="img_col">
<input id="upload" type="file" name="myfile">
<img id="img_view" />
<lable id="btn_del" class="btn_del" >刪除</label>
</div>
JS：載入頁面時取得php的圖片路徑，若有則顯示圖片，若沒有則隱藏圖片區塊
<script>
//當網頁載入時
$(document).ready(function(){
// 將php參數img_url指派給 JS 變數 img_view
var img_view="<?php echo "$img_url" ?>";
//當img_view有資料-> 圖片資料存在>顯示圖片、反之>隱藏區塊
if (img_view){
//以JQuery變更#img_view圖片的SRC參數為img_view
$("#img_view").attr('src', img_view);
//以JQuery指定刪除功能按鈕的Click事件，呼叫刪除圖片的函式(見後)
$("#btn_del").click(function(e){
del_img(img_view);
});
}else{
//隱藏圖片區塊，及刪除功能按鈕
$(".img_col").hide();
$("#btn_del").hide();
}
});
</script>
JS：選擇圖片後，將圖片顯示為所選擇的圖 (參考來源資料)
<script>//選擇圖片後產生預覽
//當input file的的upload變更時，呼叫readURL函式
$("#upload").change(function() {
readURL(this);
function readURL(input) {
//有可能圖片區塊這時被隱藏，因此先讓區塊顯示出來
$(".edit_form_img").show();
$("#btn_del").show();
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#img_preview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
});
</script>
JS：刪除圖片函式
function del_img(img)//確認刪除圖片後，刪除圖片
{
if (confirm("確認刪除照片?"))
//這邊將刪除寫在另一支php程式，並取得圖片路徑後將檔案刪除
location.href="del_product_img.php?img="+img;
}
PHP：刪除圖片php程式
- 資料庫連線部分就不寫了
- SQL將圖片的欄位update為空值
- 刪除圖片檔案
<?php
//取得傳入要刪除的圖片路徑
$img_url=$_GET["img"];
//將取得的檔案路徑 update為空值的SQL
$img_del="UPDATE product set product_img='' WHERE product_img='$img_url'";
// 執行SQL (這段的$link是物件>$link = new mysqli($dbhost,$dbuser,$dbpass,$db))
$result=$link->query($img_del);
//將檔案自系統中刪除
unlink($img_url);//將圖片檔案刪除
//刪除後轉址到原頁面
header("location:o_page.php");
?>
