手機APP頭像上傳 Hbuider前端 PHP後端完整程式碼(已測試通)
阿新 • • 發佈:2018-11-13
本程式碼是在Hbuider基礎上做得開發,
話不多說直接上程式碼:
前端:
HTML程式碼:
<div class="users"> <div id='output'>頭像</div> <div id='dcontent' ><img id='head_img' onclick="galleryImg()" src="http://m.cstm.org.cn/images/wap/user-tx.png" alt=""></div> <span id="phone"></span> </div>
JS程式碼:
<script> function plusReady(){ // 使用者側滑返回時關閉顯示的圖片 plus.webview.currentWebview().addEventListener('popGesture', function(e){ if(e.type=='start'){ closeImg(); } }, false ); } document.addEventListener('plusready',plusReady,false); function getImage(){ var cmr = plus.camera.getCamera(); cmr.captureImage(function(path){ outSet('儲存照片到系統相簿:'); plus.gallery.save(path, function(){ outLine('儲存成功'); }, function(e){ outSet('儲存失敗: '+JSON.stringify(e)); }); }, function(e){ outSet('取消拍照'); }, {filename:'_doc/gallery/',index:1}); } function galleryImg(){ // 從相簿中選擇圖片 outSet('從相簿中選擇圖片:'); plus.gallery.pick(function(path){ //outLine(path); localStorage.setItem('head_img',path) var token = localStorage.getItem('token'); $('#head_img').attr('src',path); createUpload(path); }, function(e){ outSet('取消選擇圖片'); }, {filter:'image'}); } path = localStorage.getItem('head_img') if(path){ $('#head_img').attr('src',path) } //上傳檔案 function createUpload(filename) { var task = plus.uploader.createUpload( "自己的上傳檔案路徑", { method:"POST",blocksize:204800,priority:100 }, function ( t, status ) { // 上傳完成 if ( status == 200 ) { //alert(123); } else { //alert(456); } } ); task.addFile( filename, {key:"img"} ); task.addData( "string_key", "string_value" ); task.addEventListener( "statechanged", onStateChanged, false ); task.start(); } //儲存檔案 function onStateChanged( upload, status ) { if ( upload.state == 4 && status == 200 ) { // 上傳完成 var info = JSON.parse(upload.responseText); var token = localStorage.getItem('token'); for( var i in info.files){ $.ajax({ method: "get", url: 儲存頭像的路徑, data: {token:token,url:info.files[i].url}, dataType:'jsonp' }).done(function( msg ) { if(msg.error_code == 0){ //alert('修改成功') } }) } } } function closeImg(){ var trnode=document.getElementById('imgShow'); trnode&&trnode.parentNode.removeChild(trnode); } var phone = localStorage.getItem('phone'); $('#phone').html(phone) </script>
後端程式碼(PHP) :
/** * @param Request $request * @return string * 頭像上傳 */ public function get_img(Request $request){ $ret=array('strings'=>$_POST,'error'=>'0'); $fs=array(); foreach ( $_FILES as $name=>$file ) { $fn=$file['name']; $ft=strrpos($fn,'.',0); $fm=substr($fn,0,$ft); $fe=substr($fn,$ft); $fp='files/'.$fn; $fi=1; while( file_exists($fp) ) { $fn=$fm.'['.$fi.']'.$fe; $fp='files/'.$fn; $fi++; } move_uploaded_file($file['tmp_name'],$fp); $fs[$name]=array('name'=>$fn,'url'=>$fp,'type'=>$file['type'],'size'=>$file['size']); } $ret['files']=$fs; return json_encode($ret); } /** * @param Request $request * @return string * 儲存圖片路徑 */ public function set_img(Request $request){ $callback = $request -> get('callback'); $token = $request -> get('token'); $url = $request -> get('url'); $url = "http://lmy.jinxiaofei.xyz/".$url; $user_data = DB::table('user')->where('token',$token)->first(); if(empty($user_data)){ return $callback."({error_code:1,content:'token有誤'})"; } DB::table('user')->where('token',$token)->update(['head_img'=>$url]); return $callback."({error_code:0,content:'新增成功'})"; }