JQuery/PHP 顯示上傳的圖片、取得php檔案路徑、隱藏圖片區塊、刪除圖片檔案

上傳圖片的功能與三種情境有關，整理作法如下：

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");

?>