1. 程式人生 > >app端圖片上傳介面(tp5)

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"  />-->
 

<div>
  <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;

mainImg.onload =function() {
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);
}


}