app端圖片上傳介面(tp5)
//檢視層
<div class="approve_NI_3">
<div class="approve_NI_3A">
<div class="approve_NI_3top">
<img src="../images/sp_xing.png"/>
<div>圖片</div>
</div>
<div class="approve_NI_3bottom">
<input type="file" name="img" id="file" accept="image/*;capture=camera" style="display: none;"/>
<!--<img src="../images/wd_mrtx.png" />-->
<img src="../images/sp_tupian.png" id="ui_avatar"/>
</div>
</div>
</div>
</div>
//js部分
$(function(){
$('#submit_btn').click(function(){
//alert(123);
mui.toast('新增審批成功');
setTimeout(function(){
window.location.href='./approve_sponsor.html';
},1000)
});
})
//上傳圖片
mui.plusReady(function(){
document.getElementById('ui_avatar').addEventListener('tap',function(){
if(mui.os.plus){
var a=[{
title:'拍照'
},{
title:'從手機相簿選擇'
}];
plus.nativeUI.actionSheet({
title:'修改頭像',
cancel:'取消',
buttons:a
},function(b){
switch(b.index){
case 0:
break;
case 1:
//拍照
getImages();
break;
case 2:
//開啟相簿
galleryImages();
break;
default:
break;
}
},false);
}
});
//拍照
function getImages(){
var mobileCamera=plus.camera.getCamera();
mobileCamera.captureImage(function(e){
plus.io.resolveLocalFileSystemURL(e,function(entry){
var path=entry.toLocalURL()+'?version='+new Date().getTime();
uploadHeadImg(path);
},function(err){
console.log("讀取拍照檔案錯誤");
});
},function(e){
console.log("er",err);
},function(){
filename:'_doc/head.png';
});
}
//從本地相簿選擇
function galleryImages(){
//console.log("你選擇了從相簿選擇");
plus.gallery.pick(function(a){
plus.io.resolveLocalFileSystemURL(a,function(entry){
plus.io.resolveLocalFileSystemURL('_doc/',function(root){
root.getFile('head.png',{},function(file){
//檔案已經存在
file.remove(function(){
//console.log("檔案移除成功");
entry.copyTo(root,'head.png',function(e){
var path=e.fullPath+'?version='+new Date().getTime();
//console.log(path);
uploadHeadImg(e.fullPath);
},function(err){
console.log("copy image fail: ",err);
});
},function(err){
console.log("刪除圖片失敗：（"+JSON.stringify(err)+")");
});
},function(err){
//開啟檔案失敗
entry.copyTo(root,'head.png',function(e){
var path=e.fullPath+'?version='+new Date().getTime();
uploadHeadImg(e.fullPath);
},function(err){
console.log("上傳圖片失敗：（"+JSON.stringify(err)+")");
});
});
},function(e){
console.log("讀取資料夾失敗：（"+JSON.stringify(err)+")");
});
});
},function(err){
console.log("讀取拍照檔案失敗: ",err);
},{
filter:'image'
});
};
//上傳圖片
function uploadHeadImg(imgPath){
//選中圖片之後，頭像當前的照片變為選擇的照片
var mainImg=document.getElementById('ui_avatar');
mainImg.src=imgPath;
var ordercode = $('#ordercode').val();//訂單號
var goodsname = $('#goodsname').val();//商品名稱
var reason = $('#reason').val();//異常原因
var ui_gid = $('#ui_gid').val();//審批人
var s_id = localStorage.getItem("s_id");
var time = getTime();
var sign = getSign([s_id,time]);
var han = /^[\u4e00-\u9fa5]+$/;
if(ordercode==""){
mui.toast('訂單編號不能為空');
return false;
}
if(goodsname==""){
mui.toast('商品名稱不能為空');
return false;
}
if (!han.test(goodsname)) {
mui.toast("商品名稱必須為漢字")
return false;
if(!reason){
mui.toast('異常原因不能為空');
return false;
}
if (!han.test(reason)) {
mui.toast("異常原因必須為漢字")
return false;
}
if(!ui_gid){
mui.toast('審批人不能為空');
return false;
}
var imgData=getBase64Image(mainImg);
// var data = getBase64Image(img);
console.log(imgData);
var s_id = localStorage.getItem("s_id");
var time = getTime();
var sign = getSign([s_id,time]);
mui.ajax(api_url+"Power/updateImageware",{
data:{
'img':imgData,
's_id':s_id,
'time':time,
'sign':sign,
'ordercode': ordercode,
'goodsname': goodsname,
'reason': reason,
'ui_gid': ui_gid,
},
dataType:'json',//伺服器返回json格式資料
type:'post',//HTTP請求型別
timeout:10000,//超時時間設定為10秒；
success:function(data){
if(data.code == 1){
mui.toast(data.message);
}else{
console.log(data.message);
mui.toast(data.message);
}
},
error:function(xhr,type,errorThrown){
if(type=='timeout'){
mui.alert('伺服器連線超時，請稍後再試');
}
}
});
}
var images=new Image();
images.src=imgPath;
var imgData=getBase64Image(mainImg);
// var aaa = getBase64Image(mainImg);
console.log(imgData);
// var s_id = localStorage.getItem("s_id");
// var time = getTime();
// var sign = getSign([s_id,time]);
// mui.ajax(api_url+"Kjds/updateImage",{
// data:{
// 'img':imgData,
// 's_id':s_id,
// 'time':time,
// 'sign':sign
// },
// dataType:'json',//伺服器返回json格式資料
// type:'post',//HTTP請求型別
// timeout:10000,//超時時間設定為10秒；
// success:function(data){
// if(data.code == 1){
// mui.toast(data.message);
// }else{
// console.log(data.message);
// mui.toast(data.message);
// }
// },
// error:function(xhr,type,errorThrown){
// if(type=='timeout'){
// mui.alert('伺服器連線超時，請稍後再試');
// }
// }
// });
}
//壓縮圖片轉成base64
function getBase64Image(img){
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL
}
});
//後臺介面部分
public function updateImageware(){
if(request()->isPost()){
$s_id=input('s_id');
$time = input('time');
$sign_temp = input('sign');
$ordercode = input('ordercode');
$goodsname = input('goodsname');
$reason = input('reason');
$ui_gid = input('ui_gid');
$sign = check_sign(array($s_id,$time));
//圖片
$file = input('img');
if($sign == $sign_temp){
if($file){
$new_file = $this->base64_image_content($file,'public/uploads');
if($new_file){
$url = "http://".$_SERVER['HTTP_HOST'].$new_file;
$orderdata=Db::table('kjds_tb_order')->where(array("to_order_id"=>$ordercode))->find();
if($orderdata){
session_id($s_id);
$uid=Session::get('login_id');
$o_id=$orderdata['to_id'];
$o_gid=$orderdata['o_g_id'];
$datas['sp_oid']= $o_id; //審批訂單id
$datas['sp_gid']= $o_gid; //審批商品id
$datas['sp_go_uid']=$uid;//釋出使用者ID
$datas['sp_to_uid']=$ui_gid;//審批人ID
$datas['sp_con']=$reason;//審批內容
$datas['sp_sptid']=1;//審批型別
$datas['sp_status']=0;//審批狀態
$datas['sp_create']=time();//提交時間
$datas['sp_delete']=0;
$datas['sp_goodsname']=$goodsname;
$datas['sp_image']=$url;
$res = Db::table('kjds_approval')->insert($datas);
if($res){
//呼叫父類記錄日誌方法，新增操作記錄
$whe['u_id']=$uid;
$userdata=Db::table('kjds_user')->where($whe)->find();
$uname=$userdata['u_username'];
$log_con="新增審批";//操作的內容
$log_type="新增";//日誌分類
$oid=$o_id;//訂單id
$gid=$o_gid;//商品id
$log=parent::setLog($uid,$uname,$log_con,$log_type,$oid,$gid);
if($log){
$result = array(
'code' => 1,
'message' => '圖片獲取成功',
'filePath'=>$url
);
}else{
$result = array(
'code' => 0,
'message' => '圖片獲取失敗',
);
}
}else{
$result = array(
'code' => 0,
'message' => '新增審批失敗',
);
}
}else{
$result = array(
'code' => 0,
'message' => '訂單編號不存在！'
);
}
}else{
$result = array(
'code' => 0,
'message' => '上傳失敗2！'
);
}
}else{
$result = array(
'code' => 0,
'message' => '上傳失敗1！'
);
}
}else{
$result = array(
'code' => 0,
'message' => '請求錯誤！'
);
}
return json($result);
}
}