1. 程式人生 > >手機APP頭像上傳 Hbuider前端 PHP後端完整程式碼(已測試通)

手機APP頭像上傳 Hbuider前端 PHP後端完整程式碼(已測試通)

本程式碼是在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:'新增成功'})";
    }