前端將圖片轉成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;
}
?>
沒有留言:
張貼留言