手机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:'添加成功'})";
    }