2020年8月6日 星期四

JQuery ajax post, php接收,回傳資料

花了些時間研究圖片上傳功能。
前端將圖片轉成Base64後,透過ajax post傳到後端php程式,由程式寫入資料庫並產生圖片路徑,再回傳圖片路徑資料給前端。

前端程式:
Head設定語系跟載入jquery
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>

HTML:包含一個編號、一個選擇圖片功能,一個上傳按鈕,還有一個顯示回傳資料的欄位
<html>
    <form>
        <label> 編號
            <input id="pid" type="text"/>
        </label>
        <label> 圖檔:</label>
        <label class="btn_img">請選擇圖片
            <input id="upload_img" type="file">
        </label>
        <div class="edit_form_img">
            <img id="img_preview" />
        </div>
        <input id="sent" class="form_submit" type="button" value="submit" ></input>
    </form>
    <label id="info"></label>
</html>

JS:將選擇的圖片轉成base64並產生預覽
    $("#upload_img").change(function() {
        //readURL(this);//互叫變更預覽圖片的功能
        //取得file選擇的檔案
        pv_img = $("#upload_img").get(0).files[0];
        //新增reader物件轉成base64資料,再onload時寫入圖片的scr
        var reader = new FileReader();
        reader.onload=function(){
            $("#img_preview").attr('src',reader.result);
        }
        reader.readAsDataURL(pv_img);
    });

JS 當上傳按鈕被點擊後,取得資料,並透過ajax Post到php
-這裡偷懶取代base64資料前的資料描述文字,但比較好的作法應該是要另外存檔案格式,之後轉回圖片時再加上附檔名(這動作可以在php端處理,也可以在前端)
-processData這個參數有點神奇,當true時data參數才能正確傳到php端,false就不行了;但網路上有些範例卻說要用false。若有大大知道原理,還忘不吝告知,感恩喔!
-data的傳送方式試過傳送form序列化或json.stringfy,但資料還是送不出去;這邊提供傳送成功的方式跟php接收的程式有關係。
- 取回php回傳的陣列資料,先抓兩個欄位顯示出來。

    $('#sent').click(function(){
        img64=$("#img_preview").attr("src");
        sb64=img64;
        //取代編碼後前面的描述文字
        sb64= sb64.replace("data:image/jpeg;base64,",''); 
        $.ajax({
            url:'jsonPHP.php',
            type: 'POST',
            processData: true, //false時,data參數無法傳到php POST接收端,true時才可以
            dataType: "json",
            //傳送data參數值
            data: { 'pid':$("#pid").val(),     
                    'sb64':sb64
                },
            success: function(data){
                console.log(data);
                //取回php回傳的陣列資料
                    var imgsNum=data.length;
                    for (i=0;i<imgsNum;i++){
                        imgid=data[i]['img_id'];
                        imgurl=data[i]['img_url'];
                        $("#info").append("id:"+imgid+"|url:"+imgurl);
                    }
                },
        });  
    });

PHP程式
- 取得前端傳遞的資料後,呼叫寫入資料的程式,再透過查詢回傳同個編號的圖片資料
- Insert_img 先將base64資料轉成圖片,我去抓一個時間當作檔名(這是另外引入的函式),再將資料存到資料庫
- query_img查詢同個ID的資料,存成陣列後回傳。


<?php
    header('Content-Type: application/json; charset=UTF-8');
    require_once("fundation_func.php");
    $link = new mysqli($dbhost,$dbuser,$dbpass,$db);

    //偵測POST的資料與前端ajax參數有關,要對應才行
    if ($_SERVER['REQUEST_METHOD'] == "POST"){
        @$id=$_POST["pid"];
        //@$name=$_POST["name"];
        @$sb64=$_POST["sb64"];
        $msg="取得pid:".$id;
        echo json_encode(insert_img($link, $id,$sb64));
    }else
    {
        $msg="request錯誤";
        echo json_encode(array(
            'msg'=> $msg
        ));
    }

    function insert_img($link,$product_id,$sb64){
        //產生圖片路徑
        $img_file=base64_decode($sb64);
        $file_name=get_pure_text(get_file_no());
        $file_url="product_imgs/".$product_id."_".$file_name.".jpg";
        file_put_contents($file_url, $img_file);

        //新增產品圖片資料的SQL
            $sql="INSERT INTO product_img(product_id, imgb, img_url) VALUES ('$product_id','$sb64','$file_url')";
            $link->query($sql);
        //查詢產品圖片
        return query_img($link,$product_id);
    }

//查詢同個ID的圖片函式,會回傳一個陣列
    function query_img($link,$product_id){
        $imgs_array=array(
            array('img_id','img_url'),
        );
        $sql="SELECT img_id, img_url FROM product_img WHERE product_id=$product_id";
        $result=$link->query($sql);
            $i=0;
            while($row=$result->fetch_array(MYSQLI_ASSOC)){
                //將查到的產品圖片存到array中
                $imgs_array[$i]=array(
                        'msg'=>"ss",
                        'img_id'=>$row['img_id'],
                        'img_url'=>$row['img_url']
                );
                $i++;
            }
            return $imgs_array;
    }
?>



沒有留言:

張貼留言